jquery는 카운트다운 effect_jquery를 구현합니다.-JS 튜토리얼-php.cn

jquery는 카운트다운 effect_jquery를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:25:45

원래의

1587명이 탐색했습니다.

질문에 답하는 작은 게임을 디자인하세요. 시간이 초과되면 해당 알림이 제공됩니다. 20초는 너무 길기 때문에 GIF 애니메이션을 만드는 데 적합하지 않습니다. 제가 쓴 5초 카운트다운 테스트 프로그램 결과를 살펴보세요:

1. 주요 프로그램

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>手写倒计时程序</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
  </head>
  <body>
    <section class="countDown">
      <span id="countDownTime"></span>
      <section class="clear"></section>
    </section>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

로그인 후 복사

2. CSS 스타일

*{
  margin: 0;
  padding:0;
}
html{
  font-size: 12px;
}
.countDown{
  width: 3.8rem;
  text-align: center;
  margin: 2rem auto 0 auto;
}
.countDown #countDownTime{
  font-size: 2rem;
}

로그인 후 복사

3. Jquery 프로그램

먼저 카운트다운 원리에 대해 이야기해 보겠습니다.

1. 시간을 0:0 형식으로 변환

2. 1000ms마다 시간을 1씩 자동으로 줄이려면 타이머를 시작해야 합니다

3. 시간이 0인지 확인합니다. 0이면 타이머가 끝났음을 의미합니다. 이때 프롬프트를 표시하거나 다른 작업을 수행해야 합니다

카운트다운 프로그램의 구체적인 구현을 살펴보겠습니다.

$(function(){
  var countDownTime=parseInt(5);    //在这里设置每道题的答题时长
  function countDown(countDownTime){
    var timer=setInterval(function(){
      if(countDownTime>=0){
        showTime(countDownTime);
        countDownTime--;
      }else{
        clearInterval(timer);
        alert("计时结束,给出提示");
      }
    },1000);
  }
  countDown(countDownTime);
  function showTime(countDownTime){      //这段是计算分和秒的具体数
    var minute=Math.floor(countDownTime/60);
    var second=countDownTime-minute*60;
    $("#countDownTime").text(minute+":"+second);
  }
})

로그인 후 복사

아마도 제가 작성한 원칙으로 이 JS 프로그램을 보는 것이 더 쉬울 것입니다. 친구들에게 도움이 되기를 바랍니다.