倒计时

来源:互联网 发布:时时彩源码程序出售 编辑:程序博客网 时间:2024/04/24 12:22

有时候,网站需要一个倒计时的特效来庆祝某些特别的日子。自己也实现了一个,占用内存也很小噢。其原理就是每隔一秒执行一次处理函数,将终点时间和现在的时间比较然后换算之后显示对应的值。

效果如下:


代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="text" name="time" id="time" value="2017-09-22" /><input type="button" name="okbtn" id="okbtn" value="确认" /><br /><p id="textp">这里显示倒计时</p></body><script type="text/javascript">var okbtn=document.getElementById("okbtn");    textp=document.getElementById("textp");okbtn.onclick=function(){var time=document.getElementById("time");var timevalue=time.value;//通过正则表达式确认输入格式是否正确var patt=/^(\d{1,4})(-)(\d{1,2})\2(\d{1,2})$/;if(patt.test(timevalue)==false){//如果不正确textp.innerHTML="输入格式不满足YYYY-MM-DD";return false;}else{textp.innerHTML="这里显示倒计时";}//获取输入的年月日var timearray=timevalue.split("-");//ShowLeftTime(timearray[0],timearray[1],timearray[2]);setInterval(function(){ShowLeftTime(timearray[0],timearray[1],timearray[2]);},1000);}function ShowLeftTime(year,month,date){//得出剩余时间var now=new Date();var endDate=new Date(year,month-1,date);var leftTime=endDate.getTime()-now.getTime();var leftsecond=parseInt(leftTime/1000);var day=Math.floor(leftsecond/(60*60*24));var hour=Math.floor((leftsecond-day*24*60*60)/3600); var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60); var second=Math.floor(leftsecond-day*60*60*24-hour*60*60-minute*60);//显示剩余时间textp.innerHTML="距离"+year+"年"+month+"月"+date+"日"+"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";}</script></html>

完整代码位置:

http://runjs.cn/code/w98p15ka


1 0
原创粉丝点击