js实现小时分钟数的倒计时 js一分钟倒计时

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JS使用setInterval实现倒计时功能

JS实现思路也特别简单：获取目标时间和当前时间 = 计算时间差 = 重复计算并渲染到页面

后面渲染的操作只需替换输出控制台的操作即可，这里也简单的实现一下，实现的方法也不止一种。

效果预览图：

相关问答

Q1: JS/JQ实现倒计时

不知道该怎么给你描述这个概念，这样说吧。

js中，时间有两种表示的：

1.Mon Feb 13 2012 02:58:41 GMT+0800

2.时间戳 1329073121000

这两者是等价的，可以互相转化的。

var t=new Date("Mon Feb 13 2012 02:58:41 GMT+0800");

alert(t-0); //把它当成一个时间戳，就是整型，可以做算术运算，结果为1329073121000

alert(t.toString()); //与alert(t)等价，结果为Mon Feb 13 2012 02:58:41 GMT+0800

我假设从服务器中得到的是时间戳

ASP代码部分:

dim conn,sql

set conn = server.createobject("adodb.connection")

conn.connectionstring="Provider = Microsoft.Jet.OLEDB.4.0;Data Source="server.mapPath("Database.mdb")

conn.open

sql="SELECT option FROM table WHERE type=time"

set rs = server.createobject("adodb.recordset")

rs.open sql,conn,1,1

HTML部分：

html

head

titlecountdown/title

/head

body

div id="show"/div

/body

/html

script type="text/javascript"

(function(){

// var t=%=rs("option")%;

var t=1331582321000;

var show=document.getElementById('show');

setInterval(function(){

var d=count(t);

show.innerHTML=d.day+'日'+d.hour+'小时'+d.min+'分钟'+d.sec+'秒';

},1000);

//传入要倒计时的日期的时间戳，返回还剩多少日小时分钟秒

function count(t){

var c=Math.floor((t-(new Date()))/1000);

var d,h,m,s;

d=Math.floor(c/24/3600);

h=Math.floor((c-d*24*3600)/3600);

m=Math.floor((c-d*24*3600-h*3600)/60);

s=Math.floor(c-d*24*3600-h*3600-m*60);

return {

day:d,

hour:h,

min:m,

sec:s

}

})();

/script

Q2: 初学javascript，要求编写一个倒计时，格式如00:00:00该怎么实现？时间是自己设定，想设置多少秒就多少秒

我也是业余爱好者, 以下试编写脚本如下:

html

head

title倒计时测试/title

script language="JavaScript"

var DifferenceHour = -1;

var DifferenceMinute = -1;

var DifferenceSecond = -1;

var Tday = new Date(2012,2,10,22,0,0,0); //倒计时时间点-年,月,日,时,分,秒,毫秒

var DAY_MS = 24 * 60 * 60 * 1000;

var HOUR_MS = 60 * 60 * 1000;

var SECOND_MS = 60 * 1000;

var MS = 1000;

function formatstr(value)

{

return (value9)?"0"+value:value;

}

function clock()

{

var time = new Date();

if(Tday.getTime()time.getTime())

{

alert("当前倒计时已终止!");

return;

};

var nowtime = time.toLocaleString();

var totime = Tday.toLocaleString();

var Diffms = Tday.getTime() - time.getTime(); //毫秒差

DifferenceHour = Math.floor(Diffms / DAY_MS); //转换成小时

Diffms -= DifferenceHour * DAY_MS;

DifferenceMinute = Math.floor(Diffms / HOUR_MS); //转换成分钟

Diffms -= DifferenceMinute * HOUR_MS;

DifferenceSecond = Math.floor(Diffms / SECOND_MS); //转换成秒

Diffms -= DifferenceSecond * SECOND_MS;

var dSecs = Math.floor(Diffms / MS); //转换成毫秒

var havetime = formatstr(DifferenceMinute)+" : "+formatstr(DifferenceSecond)+" : "+formatstr(dSecs);

document.formnow.totime.value = totime;

document.formnow.nowtime.value = nowtime;

document.formnow.havetime.value = havetime;

setTimeout("clock()",1000);

}

/script

/head

!--BODY里面的ONLOAD注意--

body onload="clock();return true" text="red"

!--实现显示--

form name="formnow"

!--input name="dd" type="text" style="border:0;" size=2

天--

设定时间:

input name="totime" type="text" style="border:0;" size=25 /

br /

当前时间:

input name="nowtime" type="text" style="border:0;" size=25 /

br /br /

倒计时时间:

input name="havetime" type="text" style="border:0;" size=25 /

br /

/form

Q3: JS如何实现倒计时功能，如何防止刷新。

倒计时可以用js的setTimeout来控制

;id=34class=2

可以循环计时，而对于页面刷新，我们可以屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键来达到效果

script

//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键

function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键

function window.onhelp(){return false} //屏蔽F1帮助

function document.onkeydown(){

if((window.event.altKey)((window.event.keyCode==37)||(window.event.keyCode==39))){

//屏蔽Alt+方向键←

//屏蔽Alt+方向键→

event.returnValue=false;

}

if((event.keyCode==8)||(event.keyCode==116)||(event.ctrlKey event.keyCode==82)){

//屏蔽退格删除键

//屏蔽F5刷新键

//Ctrl+R

event.keyCode=0;

event.returnValue=false;

}

if(event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11

if(event.ctrlKey event.keyCode==78)event.returnValue=false; //屏蔽Ctrl+n

if(event.shiftKey event.keyCode==121)event.returnValue=false; //屏蔽shift+F10

if(window.event.srcElement.tagName=="A" window.event.shiftKey)

window.event.returnValue=false; //屏蔽shift加鼠标左键新开一网页

if((window.event.altKey)(window.event.keyCode==115)){ //屏蔽Alt+F4

window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");

return false;

}

/script

Q4: 如何用javascript实现一小时倒计时？

js代码：fun.js

var timmerID = null;

function time() {

var time = document.getElementById("now");

var left = document.getElementById("left");

var t = time.value.split(":");

var hour = parseInt(t[0]);

var min = parseInt(t[1]);

min=min+1;

if(min==60){

hour=hour+1;

min=0;

if(hour==24){

hour=0;

}

time.value=hour+":"+min;

left.value = left.value-1;

if(left.value==0){

mystop();

alert("时间已到！");

}

function mystart() {

var left = document.getElementById("left");

left.value="40";

timmerID = window.setInterval("time()", 1000*60);

}

function mystop() {

window.clearInterval(timmerID);

}

html页面：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

html

head

titletime.html/title

script type="text/javascript" src="fun.js"/script

/head

body

时间起点：input type="text" name="now" id="now" value="0:0"/input type="button" value="开始" onclick="mystart();"br

剩余时间：input type="text" name="left" id="left" value="40" disabled="disabled"/分钟br

/body

/html

补充：这个javascript放在一个文件叫fun.js,在html页面中要引用此文件，如：script type="text/javascript" src="fun.js"/script ，注意不要把路径弄错了，src后面的路径按照实际的来，如果两个文件在一个目录下，就是如上这样引用，当然也可以直接把全部的js内容放在html文件的头部，如：script type="text/javascript"

!--javascript代码--

/script

Q5: 求一个倒计时js代码,非常简单的

逻辑如下：

1、先判断两个时间的时间差，当然如果得到的时间是13位时间戳的话你需要转化一下

2、判断时间够一天显示天数，够一小时显示小时数