这篇文章将为大家详细讲解有关JavaScript如何利用Date实现简单的倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

介绍

Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。Date在js中和Array类似,都是拥有自己的特殊方法的特殊对象。

创建 Date 对象的语法:

varmyDate=newDate()//Date对象会自动把当前日期和时间保存为其初始值。

获取倒计时之前,我们不妨先来看怎样获取当前时间吧!!!

functiontime(){varoDate=newDate();varyear=oDate.getFullYear();varmonth=oDate.getMonth()+1;vardDate=oDate.getDate();varday=oDate.getDay();varhouse=oDate.getHours();varminu=oDate.getMinutes();varsec=oDate.getSeconds();switch(day){case1:day='星期一';break;case2:day='星期二';break;case3:day='星期三';break;case4:day='星期四';break;case5:day='星期五';break;case6:day='星期六';break;case0:day='星期日';break;}functiondouble(t){if(t<10){t='0'+t;}returnt;}document.body.innerHTML=year+'年'+month+'月'+dDate+'日'+day+''+double(house)+':'+double(minu)+':'+double(sec);}time();setInterval(time,1000);

获取倒计时

1、实现倒计时功能

2、倒计时结束按钮可被点击,之前不可被点击

实例代码:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><divid="lastTime"><span>0天</span><span>00:</span><span>00:</span><span>00</span></div><br/><br/><styletype="text/css">#btn{text-decoration:none;display:block;width:100px;height:35px;background:#ccc;text-align:center;line-height:35px;color:#666;}#btn.btn{background:red;color:#fff;font-size:20px;font-weight:bold;}</style><ahref="javascript:;"id="btn">即将开抢!</a><scripttype="text/javascript">varoLt=document.getElementById("lastTime");varoBtn=document.getElementById("btn");time();vartimer=setInterval(time,1000);functiontime(){varendTime=newDate('2017/01/1300:00:00');//结束日期不得在当前日期之前varnowTime=newDate();varsplus=endTime.getTime()-nowTime.getTime();//天时分秒if(splus<=1){clearInterval(timer);oBtn.className='btn';oBn.innerHTML='开始秒杀!';oBtn.href='http://www.baidu.com';return;}else{oBtn.className='';}varday=Math.floor(splus/1000/60/60/24);varhours=Math.floor(splus/1000/60/60%24);varmin=Math.floor(splus/1000/60%60);varsec=Math.floor(splus/1000%60);oLt.innerHTML=day+'天'+double(hours)+':'+double(min)+':'+double(sec);functiondouble(n){if(n<10){n='0'+n;}returnn;}}</script></body></html>

关于“JavaScript如何利用Date实现简单的倒计时”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。