首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟主机、营销软件、网站建设、谢通门网站维护、网站推广。
getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似
setTimeout(code,millisec); // 在指定的毫秒数后调用函数
实例演示如下
创建Html元素
div class="box"
span距离2015年国庆节还剩：/spanbr
div class="content"
input type="text" id="time_d"天input type="text" id="time_h"时input type="text" id="time_m"分input type="text" id="time_s"秒
/div
/div
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}
编写jquery代码
$(function(){
show_time();
});
function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day 10){
int_day = "0" + int_day;
}
if(int_hour 10){
int_hour = "0" + int_hour;
}
if(int_minute 10){
int_minute = "0" + int_minute;
}
if(int_second 10){
int_second = "0" + int_second;
}
// 显示时间
$("#time_d").val(int_day);
$("#time_h").val(int_hour);
$("#time_m").val(int_minute);
$("#time_s").val(int_second);
// 设置定时器
setTimeout("show_time()",1000);
}
观察效果
某个时刻的截图
几秒后的截图
从服务器请求时间。
存cookie
用html5中的存储方法 localStorage
然后我发给你个 倒计时代码，但是没有设置 存储！
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
/head
link rel="stylesheet" type="text/css" href="../css/zui.min.css" /
style type="text/css"
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.cz-timekeepingContainer {
height: 52px;
padding: 0 20px;
background: #e01222;
font-size: 12px;
color: #FFFFFF;
}
.cz-timekeepingContainer .timeTitle {
margin-top: 20px;
}
.cz-timekeepingContainer .timeIm {
margin-top: 20px;
}
.cz-timekeepingContainer .timeIm ul {
margin: 0 6px;
margin-top: -13px;
}
.cz-timekeepingContainer .timeIm ul li {
float: left;
}
.cz-timekeepingContainer .timeIm ul .timeNum {
background: #440106;
border-radius: 2px;
text-align: center;
line-height: 38px;
color: #E01222;
font-size: 22px;
font-weight: 600;
padding: 0 6px;
}
.cz-timekeepingContainer .timeIcon {
width: 12px;
height: 16px;
margin-top: 8px;
}
.cz-timekeepingContainer .timeIcon span {
width: 4px;
height: 4px;
border-radius: 100%;
background: #440106;
display: block;
margin: auto;
margin-top: 4px;
}
/style
body
div class="cz-timekeepingContainer"
div class="timeTitle pull-left"
span总有你想不到的价格/span
/div
div class="timeIm pull-right"
div class="pull-left"还有/div
ul class="pull-left"
li class="timeNum"
div class="czHours"00/div
/li
li class="timeIcon"
span/span
span/span
/li
li class="timeNum"
div class="czMinuts"00/div
/li
li class="timeIcon"
span/span
span/span
/li
li class="timeNum"
div class="timeSecond"00/div
/li
/ul
div class="pull-left"结束抢购/div
/div
/div
/body
script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"/script
script type="text/javascript"
!(function($) {
var CZCountDown = function (element, options)
{
this.$ = $(element);
this.options = this.getOptions(options);
this.init();
this.timer = null;
};
CZCountDown.DEFAULTS =
{
time : getDefaulTime()
};
CZCountDown.prototype.getOptions = function (options)
{
options = $.extend({}, CZCountDown.DEFAULTS, options);
return options;
};
CZCountDown.prototype.init = function ()
{
var timeReg = /\d{4}(\-)\d{1,2}(\-)\d{1,2}\s\d{1,2}(\:)\d{1,2}(\:)\d{1,2}/;
if( !timeReg.test(this.options.time))
{
alert("填写日期格式不对")
};
var time = new Date(this.options.time);
var time = time.getTime();
this.formatTime(time);
}
CZCountDown.prototype.formatTime = function (time)
{
var self = this;
var nowTime = +new Date();
this.time = time;
clearTimeout(this.timer);
if( (time - nowTime) 0 )
{
this.timer = setTimeout(function ()
{
self.formatTime(self.time);
}, 1000);
timeNum = czFormatTime(time - nowTime);
czSethtml(timeNum);
}else if( (time - nowTime) 0 )
{
alert("设置时间小于当前时间");
}
}
var czSethtml = function (val)
{
$('.czHours').html(val.h);
$('.czMinuts').html(val.m);
$('.timeSecond').html(val.s);
}
function getDefaulTime()
{
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var day = nowDate.getDate();
var H = nowDate.getHours() + 1;
var M = nowDate.getMinutes();
var S = nowDate.getSeconds();
var defaulDate = [year, month, day];
var defaulDate = defaulDate.join('-');
var defaulTime = [H, M, S];
var defaulTime = defaulTime.join(':');
return time = defaulDate + " " + defaulTime;
}
function czCover(num)
{
var n = parseInt(num, 10);
return n 10 ? '0' + n : n;
}
function czFormatTime(ms)
{
var s = ms / 1000,
m = s / 60;
return {
d : czCover(m / 60 / 24),
h : czCover(m / 60 % 24),
m : czCover(m % 60),
s : czCover(s % 60)
};
}
$.fn.czCountDown = function (method)
{
return this.each(function ()
{
var $this = $(this);
new CZCountDown($this, method);
});
}
})(window.jQuery);
$('.timeIm').czCountDown(
{
time : "2016-12-20 2:2:2"
});
/script
/html
var range = NY-Math.round((new Date()).getTime()/1000)
.....
if(range0){
return nol(days)+' '+nol(hours)+' '+nol(min)+' '+nol(sec);
}else{
$('#new_year').html("已经结束");
}
加个判断试试，当range小于0时就是结束吧，要该时间就是改这里吧var NY = Math.round((new Date('3/08/2015 21:00:00')).getTime()/1000);
具体代码如下所示：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
/head
body
span class="timespan"/span
/body
script src="libs/jquery-1.11.3.js"/script
script
var starttime = new Date("2017/11/20");
setInterval(function () {
var nowtime = new Date();
var time = starttime - nowtime;
var day = parseInt(time / 1000 / 60 / 60 / 24);
var hour = parseInt(time / 1000 / 60 / 60 % 24);
var minute = parseInt(time / 1000 / 60 % 60);
var seconds = parseInt(time / 1000 % 60);
$('.timespan').html(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
}, 1000);
/script
/html
本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考，具体如下：
一个实现了在按钮上显示倒计时，倒计时完毕自动将按钮设置为不可用的效果，具体代码如下：
html
head
titletest
count
down
button/title
script
src="jquery1.8.3.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function
()
{
$('#btn').click(function
()
{
var
count
=
10;
var
countdown
=
setInterval(CountDown,
1000);
function
CountDown()
{
$("#btn").attr("disabled",
true);
$("#btn").val("Please
wait
"
+
count
+
"
seconds!");
if
(count
==
0)
{
$("#btn").val("Submit").removeAttr("disabled");
clearInterval(countdown);
}
count--;
}
})
});
/script
/head
body
input
type="button"
id="btn"
value="Submit"
/
/body
/html
运行效果截图如下：
希望本文所述对大家jQuery程序设计有所帮助。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
//换成你的jquery库
script type="text/javascript" src="jquery.js"/script
script type="text/javascript"
var setTime;
$(document).ready(function(){
var time=parseInt($("#time").text());
setTime=setInterval(function(){
if(time=0){
clearInterval(setTime);
return;
}
time--;
$("#time").text(time);
},1000);
});
/script
/head
body
span id="time"60/span
/body
/html