网络编程
位置：首页>> 网络编程>> JavaScript>> JS实现针对给定时间的倒计时功能示例

JS实现针对给定时间的倒计时功能示例

作者：布瑞泽的童话　　发布时间：2024-04-16 09:46:57　

标签：JS,倒计时

本文实例讲述了JS实现针对给定时间的倒计时功能。分享给大家供大家参考，具体如下：

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

效果如下：

JS实现针对给定时间的倒计时功能示例

代码如下：


<!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>

希望本文所述对大家JavaScript程序设计有所帮助。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com