JavaScript如何利用Date实现简单的倒计时
这篇文章将为大家详细讲解有关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实现简单的倒计时”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。