js如何实现倒计时功能 JS倒计时代码

2024-09-06 12:41:10

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了js如何实现倒计时功能 JS倒计时代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

这个特效比较简单，高手勿喷

倒计时主要用到的知识点：

1、设置时间间隔的setInterval可以被clearInterval取消

2、毫秒转换为时分格式

效果如图

js如何实现倒计时功能 JS倒计时代码 var shijian=3600; var time=null; function start(){ time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔 } function count(){ if(shijian<0){ alert("time out"); pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。 }else{ $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式 shijian--; console.info(time); } } function pause(){ clearInterval(time); } function goOn(){ time = setInterval("count()",1000);//重新设置时间间隔 }

下面是HTML文件代码

<!doctype html><html><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="1.js"></script>    <script src="jquery-1.8.3.min.js"></script>    <style type="text/css">        input{            background-color: #9fc5f1;            width: 100px;            height: 30px;            line-height: 30px;            text-align: center;            color: #fff;            font-size:14px;            font-weight: bold;        }        #time p{            color: #1f6dc2;            font-size: 48px;            font-weight: bold;            margin-left:90px;            margin-bottom:0px;        }    </style>    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><body><p id="time">    <p>00:00</p>    <input type="button" value="开始" onclick="start()"/>    <input type="button" value="暂停" onclick="pause()"/>    <input type="button" value="继续" onclick="goOn()"/></p></body></html>

弄到本地看看效果吧

以上就是js如何实现倒计时功能 JS倒计时代码的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript 对象与数组参考大全

下一篇：解决JS加载速度慢的问题,让javascript加载速度倍增的方法