cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS如何实现分钟倒计时（十分钟倒计时实例）

JS如何实现分钟倒计时（十分钟倒计时实例）

yulia
yuliaasal
2018-10-17 17:20:3020999semak imbas

工作中经常需要在页面中设置倒计时，那你知道JS如何实现分钟倒计时吗？这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用，感兴趣的朋友可以看看。

编写JS倒计时代码需要用到很多JavaScript知识，比如：if函数，Math.floor，定时器setInterval等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。

举例：10分钟考试倒计时，当时间仅剩五分钟时，提醒考试仅剩5分钟，时间结束时，提示考试结束。具体代码如下：

HTML部分：

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

JavaScript部分：

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

JS十分钟倒计时代码的具体步骤：

1、设置考试时长maxtime = 10 * 60秒，即10分钟

2、用if函数判断，当maxtime大于等于零时，判断剩余分和秒

3、再用if函数判断，当时间仅剩5分钟时，弹出提示：距离结束仅剩5分钟

4、如果时间到，则清除定时器，提示：结束

效果如图所示：

图片1.jpg

图片2.jpg

图片3.jpg

以上给大家分享了一个JS倒计时十分钟的代码，步骤很详细，容易理解，初学者可以自己动手尝试，看看能不能实现倒计时的效果，希望这篇文章对你有所帮助！

【相关教程推荐】

1. JavaScript中文参考手册
2. JavaScript视频教程
3. bootstrap教程

Atas ialah kandungan terperinci JS如何实现分钟倒计时（十分钟倒计时实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用javascript求两个字符串最大的相同的子串（代码实例）Artikel seterusnya：浅谈ajax的缓存机制---IE浏览器方面

Artikel berkaitan

Lihat lagi