jquery如何实现倒计时效果

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟主机、营销软件、网站建设、谢通门网站维护、网站推广。

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); 

}

观察效果

某个时刻的截图

几秒后的截图

求教jquery倒计时，可刷新的

从服务器请求时间。

存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

jquery倒计时 设定的时间到了，不执行了。怎么写？

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);

订单用jquery实现倒计时怎么写

具体代码如下所示：

!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实现的按钮倒计时效果

本文实例讲述了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程序设计有所帮助。

jquery写 60s倒计时

!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

本文名称：倒计时jquery,倒计时英文
URL标题：http://kswjz.com/article/dsdogci.html