JS倒计时教程,JS距离将来倒计时_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

JS倒计时教程,JS距离将来倒计时

来源：未知作者：类型：图文教程点击次数：发布时间：2015-08-14 15:54:07

js倒计时的写法：商城抢购小米手机抢购网站上线倒计时团购倒计时等等 2天：1小时：3分钟：20秒
倒计时的原理：
未来时间-现在时间 =剩余时间我们将剩余时间通过setInterval刷新时间每秒刷新；
getTime() 时间戳转换成毫秒

运行下面代码查看效果：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS倒计时教程,JS距离将来倒计时 - 多元速网页设计培训 www.doysu.com</title> </head> <style> html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0} body { font:14px "Microsoft YaHei","宋体",Arial,sans-serif; /*需要修改*/ text-align: center; /*为了解决ie5.5下面的居中问题*/ background:#fff; /*需要修改*/ color:#959595; /*需要修改*/ } .times{ font-size:40px; margin-top:50px; } .times span{ font-size:80px; color:#333; margin:0 10px; } </style> <script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js"></script> <script> /* * js倒计时的写法商城抢购小米手机抢购网站上线倒计时团购倒计时等等 2天：1小时：3分钟：20秒 * 倒计时的原理： * 未来时间-现在时间 =剩余时间我们将剩余时间通过setInterval刷新时间每秒刷新； * getTime() 时间戳转换成毫秒 */ function _time(){ //第一步设置未来时间； var setTime = new Date('2015/08/20 09:00:00'); //获取现在的时间； var nowTime = new Date(); //时差这里获取的毫秒 1000毫秒 = 1秒 var shicha = setTime.getTime()-nowTime.getTime(); //计算时间 var _day = parseInt(shicha/1000/60/60/24); //天 var _hour = parseInt(shicha/1000/60/60%24); //小时 var _minute = parseInt(shicha/1000/60%60); //分钟 var _second = parseInt(shicha/1000%60); //秒 //赋值 $(".day").text(_day); $(".hour").text(_hour); $(".minute").text(_minute); $(".second").text(_second); } $(function(){ setInterval("_time()",1000); }) </script> <body> <div class="container times tc"> <p class="mb20">网站上线时间：</p> <span class="day">00</span>天 <span class="hour">00</span>小时 <span class="minute">00</span>分钟 <span class="second">00</span>秒 </div> </body> </html>
提示：您可以先修改部分代码再运行

本文转载自：合肥网页设计培训。