jquery如何实现倒计时效果

一、jquery如何实现倒计时效果

1、首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

2、getTime()//返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似

3、setTimeout(code,millisec);//在指定的毫秒数后调用函数

实例演示如下

4、<span>距离2015年国庆节还剩：</span><br>

5、<inputtype="text"id="time_d">天<inputtype="text"id="time_h">时<inputtype="text"id="time_m">分<inputtype="text"id="time_s">秒

6、</div>

设置css样式

7、div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}

8、div.box>span{color:#999;font-style:italic;}

9、div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}

10、input[type='text']{width:45px;height:35px;padding:5px10px;margin:5px0;border:1pxsolid#ff9966;}

编写jquery代码

11、 vartime_start=newDate().getTime();//设定当前时间

12、 vartime_end=newDate("2015/10/0100:00:00").getTime();//设定目标时间

13、 vartime_distance=time_end-time_start;

14、 varint_day=Math.floor(time_distance/86400000)

15、 time_distance-=int_day*86400000;

16、 varint_hour=Math.floor(time_distance/3600000)

17、 time_distance-=int_hour*3600000;

18、 varint_minute=Math.floor(time_distance/60000)

19、 time_distance-=int_minute*60000;

20、 varint_second=Math.floor(time_distance/1000)

21、 setTimeout("show_time()",1000);

二、JS实现简单网页倒计时器

1、要制作一个简单的网页倒计时器，可以使用JavaScript实现。首先，我们编写HTML代码，创建一个用于显示倒计时时间的div元素。

2、接下来，编写JavaScript代码。首先获取当前时间，然后指定一个到期时间（例如2032年1月1日），计算当前时间和到期时间的时间差（以毫秒为单位）。接着判断如果时间超了，停止倒计时。

3、已知总的秒数，通过取整数的方法计算天数、小时、分钟和秒数。为了增加用户体验，将数字转换成字符串，并在不足10的分秒中前补0。

4、定义一个空的字符串用于接收最后的倒计时字符串，并将其显示在页面上。最后，通过setInterval函数每1000毫秒更新一次倒计时。

5、//指定计时器到期时间，首先封装函数

6、 var now= new Date();//获取当前时间

7、 var to= new Date(2032, 1, 1, 0, 0, 0);//指定到期时间

8、 var deltaTime=(to- now)/ 1000;//求时间差（秒）

9、//判断如果时间超了，停止倒计时

10、 window.clearInterval(antitime);

11、 var d= Math.floor(deltaTime/ 3600/ 24),

12、 h= Math.floor(deltaTime/ 3600% 24),

13、 m= Math.floor(deltaTime/ 60% 60),

14、 s= Math.floor(deltaTime% 60);

15、 if(d< 10) d='0'+ d;

16、 if(h< 10) h='0'+ h;

17、 if(m< 10) m='0'+ m;

18、 if(s< 10) s='0'+ s;

19、 var timer01='距离2032年1月1日还有'+ d+'天'+ h+'小时'+ m+'分'+ s+'秒';

20、 document.getElementById('box').innerHTML= timer01;

21、//开启定时器，每1000毫秒更新一次

22、以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

三、js倒计时精确到毫秒

var myDate= new Date(); myDate.getYear();//获取当前年份(2位)

myDate.getFullYear();//获取完整的年份(4位,1970-????)

myDate.getMonth();//获取当前月份(0-11,0代表1月)

myDate.getDate();//获取当前日(1-31)

myDate.getDay();//获取当前星期X(0-6,0代表星期天)

myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();//获取当前小时数(0-23)

myDate.getMinutes();//获取当前分钟数(0-59)

myDate.getSeconds();//获取当前秒数(0-59)

myDate.getMilliseconds();//获取当前毫秒数(0-999)

myDate.toLocaleDateString();//获取当前日期

var mytime=myDate.toLocaleTimeString();//获取当前时间

myDate.toLocaleString();//获取日期与时间

Date.prototype.isLeapYear判断闰年

Date.prototype.Format日期格式化

Date.prototype.DateAdd日期计算

Date.prototype.DateDiff比较日期差

Date.prototype.toString日期转字符串

Date.prototype.toArray日期分割为数组

Date.prototype.DatePart取日期的部分信息

Date.prototype.MaxDayOfDate取日期所在月的最大天数

Date.prototype.WeekNumOfYear判断日期所在年的第几周

StringToDate字符串转日期型 IsValidDate验证日期有效性