Home > Article > Web Front-end > jquery implements countdown effect_jquery

jquery implements countdown effect_jquery

WBOYOriginal: 2016-05-16 15:25:451589browse

Design a small game of answering questions. Each question can be answered in 20 seconds. If the time is exceeded, a corresponding reminder will be given. Since 20 seconds is too long, it is not suitable for making GIF animations. Let’s take a look at what I wrote. The results of the 5-second countdown test program:

1. Main program

<!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 style

*{
  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 program

First let’s talk about the principle of countdown:

1. Convert the time to 0:0 format

2. You need to start a timer to automatically reduce the time by 1 every 1000ms

3. Determine whether the time is 0. If it is 0, it means the timer is over. At this time, you need to give a prompt or do other things

Let’s look at the specific implementation of the countdown program:

$(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);
  }
})

It will probably be easier to look at this JS program with the principles I wrote. I hope it will be helpful to my friends.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS+JSP method to implement static page visit count statistics through img tag call_javascript skillsNext article：JS+JSP method to implement static page visit count statistics through img tag call_javascript skills

See more

jquery implements countdown effect_jquery

Related articles