纯JS实现JS倒计时,最小单位为毫秒
浏览: 4,711次 日期:2017年12月22日 23:13:56 作者:青格勒
有时候网站上需要JS倒计时效果,尤其是一些活动的倒计时或者说买活动产品的时候就需要JS倒计时,为了倒计时的准时性我建议大家从服务器上获取时间,然后再去减少时间。
JS倒计时一般都是天、时、分、秒、毫秒,这样去显示的、如果是一般的活动最小的单位分钟就可以了,抢购活动的话需要到秒或者毫秒了。
这次的JS倒计时时间比较着急,所以也没有进行包装,往后有时间会进行包装一下,下面的代码对于一般的JS倒计时还是可以的,比如说活动的倒计时还是可以用。
点击最下方的按钮进行运行。
<div id="cgl_time">
<span>00天</span>
<span>00时</span>
<span>00分</span>
<span>00秒</span>
<span>00毫秒</span>
</div>
<script>
(function () {
var cgl_time = document.getElementById('cgl_time');//时间的外box
var cgl_times = cgl_time.getElementsByTagName('span');//放置天、时、分、秒
var endtime= new Date('2018/01/22 20:20:00');//最终时间
var begintime = new Date('2017/12/22 16:10:00');//当前时间 ---> 需要从服务器获取,千万不要获取本地时间,你不知道你的用户是什么群体,真的
var timec = endtime.getTime() - begintime.getTime();//相差时间
var shuaxin = 100;//刷新时间,刷新时间和每次减少的时间是一样的,建议数值是100
cgl_time_run = setInterval(function () {
/**
*console需要删除,IE浏览器会报错
* */
//console.log('最终时间:' + endtime.getTime())
//console.log('当前时间:' + begintime.getTime())
//console.log('相差时间:' + timec);
//console.log('时时相差:' + timec);
//本文原链接:http://cenggel.com/
timec-=shuaxin;//每次减少1秒
/**
* 初始化数值*/
var d=0;//天数
var h=0;//时
var m=0;//分
var s=0;//秒
var r=0;//秒
/**开始走判断的
* */
if( timec >= 0){
/**
* 取余计算*/
d=Math.floor(timec/1000/60/60/24);//计算天数
h=Math.floor(timec/1000/60/60%24);//计算时数
m=Math.floor(timec/1000/60%60);//计算分数
s=Math.floor(timec/1000%60);//计算秒数
r=Math.floor(timec%1000)/10;//计算秒数
/**
* 各个数保持2两位*/
if(h<10){h="0" + h}
if(m<10){m="0" + m}
if(s<10){s="0" + s}
if(r<10){r="0" + r}
/**
* 输出时间*/
cgl_times[0].innerHTML = d + "天";
cgl_times[1].innerHTML = h + "时";
cgl_times[2].innerHTML = m + "分";
cgl_times[3].innerHTML = s + "秒";
cgl_times[4].innerHTML = r;
}else{
/**
* 倒计时完成后输出文字,使用clearInterval来停止倒计时*/
cgl_time.innerHTML = "倒计时已经结束!";
clearInterval(cgl_time_run);
}
},shuaxin);
})();
</script>
<style type="text/css">
body{ background:#999;}
#cgl_time{ text-align:center; font-size:80px; line-height:400px;}
</div>
后期会对代码进行更新个升级,有其他想法的同学可以留言哦。
文章链接:http://cenggel.com/js/26.html
版权声明:文章《纯JS实现JS倒计时,最小单位为毫秒》由青格勒编写,转载请带上文章链接。
本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。
点击任意位置关闭窗口,感谢您的支持。
打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:
- 1.打赏纯粹自愿,金额不限,别太多,1块就行;
- 2.打赏不能作为解答疑问的理由;
- 3.打赏不能帮你做毕业设计或论文;
- 4.打赏不能帮你做工作中的项目;
- 5.打赏就是这不能那不能,只是单纯打赏而已。
- 5.最后谢谢支持。
相关文章
-
2022-12-11
◆ 怎么用js生成雪花id?
-
2020-02-15
◆ js计算一筐鸡蛋
-
2019-02-27
◆ JS生成随机密码
-
2019-01-20
◆ JQuery拖拽效果
-
2018-12-25
◆ 后端传过来一个JS代码,前端拿到之后执行
-
2018-11-18
◆ JS数组去重 – JSON数组去重
发表评论