How to implement minute countdown in JS (ten-minute countdown example)-JS Tutorial-php.cn

How to implement minute countdown in JS (ten-minute countdown example)

yulia

Release： 2018-10-17 17:20:30

Original

21001 people have browsed it

We often need to set a countdown on the page at work, so do you know how to implement a minute countdown in JS? This article shares with you a JS ten-minute countdown code. It is very simple and practical. Friends who are interested can take a look.

Writing JS countdown code requires a lot of JavaScript knowledge, such as: if function, Math.floor, timer setInterval, etc. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit JavaScript video tutorial.

Example: 10-minute exam countdown. When there are only five minutes left, it will remind you that there are only 5 minutes left in the exam. When the time ends, it will prompt that the exam is over. The specific code is as follows:

HTML part:

<body>
  <div id="timer"></div>
  <div id="warring"></div>
</body>

Copy after login

JavaScript part:

<script type="text/javascript">
  var maxtime = 10 * 60; //  
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
                    alert("时间到，结束!");
                }
            }
            timer = setInterval("CountDown()", 1000);     
 </script>

Copy after login

Specific steps of the JS ten-minute countdown code:

1. Set the exam duration maxtime = 10 * 60 seconds, that is, 10 minutes

2. Use the if function to judge. When maxtime is greater than or equal to zero, judge the remaining minutes and seconds.

3. Use the if function to judge again. When the time When there are only 5 minutes left, a prompt pops up: There are only 5 minutes left before the end

4. If the time is up, the timer is cleared and the prompt is: End

The effect is as shown in the figure:

How to implement minute countdown in JS (ten-minute countdown example)

I have shared with you a JS code for counting down ten minutes. The steps are very detailed and easy to understand. Beginners can try it themselves to see if they can achieve the countdown effect. I hope this article will be helpful to you!

【Recommended tutorials】

1. JavaScript Chinese Reference Manual
2. JavaScript Video Tutorial
3. bootstrap tutorial

The above is the detailed content of How to implement minute countdown in JS (ten-minute countdown example). For more information, please follow other related articles on the PHP Chinese website!