本文目录一览：
- 1、js计时器中setTimeout和setInterval的区别和使用
- 2、提问一段关于倒计时的javascript代码，请大神指点
- 3、怎样用javascript做一个计时器
- 4、用javascript写一个计时器程序，有启动暂停和复位
- 5、javascript倒计时时间代码怎么写 比如在页面上显示3，2，1
- 6、谁能给我一个倒计时的代码啊？
js计时器中setTimeout和setInterval的区别和使用
JavaScript 计时器
计时器类型：
一次性计时器(setTimeout)：仅在指定的延迟时间之后触发一次。
间隔性触发计时器(setInterval)：每隔一定的时间间隔就触发一次。
计时器方法：
一.计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title计时器/title
script type="text/javascript"
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
/script
/head
body
form
input type="text" id="clock" size="50" /
/form
/body
/html
二.计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
!DOCTYPE HTML
html
head
script type="text/javascript"
setTimeout("alert('Hello!')", 3000 );
/script
/head
body
/body
/html
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
!DOCTYPE HTML
html
head
script type="text/javascript"
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
/script
/head
body
form
input type="button" value="start" onClick="tinfo()"
/form
/body
/html
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
!DOCTYPE HTML
html
head
script type="text/javascript"
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
/script
/head
body
form
input type="text" id="txt" /
input type="button" value="Start" onClick="numCount()" /
/form
/body
/html
提问一段关于倒计时的javascript代码，请大神指点
你这个代码看着我都有点晕，你看我这个吧
!DOCTYPE html
html
head lang="ch"
meta charset="UTF-8"
titlecountdown/title
/head
body
span id="countdown"/span
script
var days, hours, minutes, seconds;
var target_date = new Date("Jan 1, 2050").getTime();
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "天, " + hours + "小时, "
+ minutes + "分钟, " + seconds + "秒";
}, 1000);
/script
/body
/html
怎样用javascript做一个计时器
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器.
计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面.
那现在我们来完成这个界面
label计时:/label
input type="text" name="" id="timer"/
button onclick="pause(this)" id="pause" state="on"暂停/button
button onclick="restart()"重新开始/button
给标签元素一个ID是为了获取其中的标签, 然后加入了两个点击事件, 计数器的暂停, 和重新开始事件.
首先我们来完成开始计时的处理, 开始计时主要还是是用了setInterval的方法, 其中每隔1秒执行一次方法,
这样我们就可以对时间做处理, 就像开头所说60秒等于1分钟..., 所以这里就需要用判断来处理, 最后就将其中的得到的秒,分,时显示到输入框里.
var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时
//60秒 === 1分
//60分 === 1小时
function timer() {
return setInterval(function () {
var str_sec = n_sec;
var str_min = n_min;
var str_hour = n_hour;
if ( n_sec 10) {
str_sec = "0" + n_sec;
}
if ( n_min 10 ) {
str_min = "0" + n_min;
}
if ( n_hour 10 ) {
str_hour = "0" + n_hour;
}
var time = str_hour + ":" + str_min + ":" + str_sec;
ele_timer.value = time;
n_sec++;
if (n_sec 59){
n_sec = 0;
n_min++;
}
if (n_min 59) {
n_sec = 0;
n_hour++;
}
}, 1000);
}
var n_timer = timer();
我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.
用户点击了暂停, 计时器就停止计时, 用户继续点击这个按钮, 计时器继续计时. 所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.
//暂停和继续
function pause(self) {
var state = self.getAttribute("state");
if (state === "on") {
clearInterval(n_timer);
self.textContent = "继续";
self.setAttribute("state", "off");
} else {
n_timer = timer();
self.textContent = "暂停";
self.setAttribute("state", "on");
}
}
最后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清0, 然后改变暂停按钮初始状态.
function restart() {
clearInterval(n_timer);
n_sec = 0;
n_min = 0;
n_hour = 0;
n_timer = timer();
var ele_pause = document.getElementById("pause");
ele_pause.textContent = "暂停";
ele_pause.setAttribute("state", "on");
}
这样就完成了计时的功能.效果如下
用javascript写一个计时器程序，有启动暂停和复位
#html:
input type="button" value="启动" id="btnStart" /
input type="button" value="复位" id="btnReset" /
label id="lblTime"0:0:0:0/label
#javascript:
window.onload = function () {
var start = document.getElementById("btnStart");
var reset = document.getElementById("btnReset");
var time = document.getElementById("lblTime");
var h = 0, m = 0, s = 0, ms = 0, t;
//开始计时
start.onclick = function () {
bvalue = start.value;
if (bvalue == "启动") {
t = window.setInterval(function () {
if (ms == 100) {
s += 1;
ms = 0;
}
if (s == 60) {
m += 1;
s = 0;
}
if (m == 60) {
h += 1;
m = 0;
}
time.textContent = h + ":" + m + ":" + s + ":" + ms;
ms++;
}, 10);
start.value = "暂停";
}
else {
window.clearInterval(t);
start.value = "启动";
}
}
//复位
reset.onclick = function () {
window.clearInterval(t);
time.textContent = 0 + ":" + 0 + ":" + 0 + ":" + 0;
}
}
javascript倒计时时间代码怎么写 比如在页面上显示3，2，1
meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=4)"SCRIPT LANGUAGE="JavaScript"
var maxtime ="3";
function CountDown(){
if(maxtime=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "你的文字说明"+minutes+"分"+seconds+"秒";//动态显示剩余时间。
document.all["timer"].innerHTML=msg;
//if(maxtime == 3) document.all["timer"].innerHTML='只剩3秒！';
--maxtime;
}
else{
clearInterval(timer);
document.all["timer"].innerHTML='123';
}
}
timer = setInterval("CountDown()",1000);
/SCRIPT
div id=timer/div
谁能给我一个倒计时的代码啊？
第一种：精确到秒的javascript倒计时代码
HTML代码:
form name="form1"
div align="center" align="center"
center离2010年还有:br
input type="textarea" name="left" size="35" style="text-align: center"
/center
/div
/form
script LANGUAGE="javascript"
startclock()
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowMonth = Today.getMonth();
var NowDate = Today.getDate();
var NowYear = Today.getYear();
var NowSecond = Today.getSeconds();
if (NowYear 2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒'
document.form1.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
// --
/script
第二种：某某运动会
HTML代码:
!--倒计时Javascript begin--
script language="JavaScript"
!--
function DigitalTime1()
{
var deadline= new Date("08/13/2007") //开幕倒计时
var symbol="8月13日"
var now = new Date()
var diff = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差
var leave = (deadline.getTime() - now.getTime()) + diff*60000
var day = Math.floor(leave / (1000 * 60 * 60 * 24))
var hour = Math.floor(leave / (1000*3600)) - (day * 24)
var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60)
var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60)
var deadline_2= new Date("08/13/2004") //开幕后计时
var symbol_2="8月13日"
var now_2 = new Date()
var diff_2 = -480 - now.getTimezoneOffset() //是北京时间和当地时间的时间差
var leave_2 = (now_2.getTime() - deadline_2.getTime()) + diff_2*60000
var day_2 = Math.floor(leave_2 / (1000 * 60 * 60 * 24))
var hour_2 = Math.floor(leave_2 / (1000*3600)) - (day_2 * 24)
var minute_2 = Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60)
var second_2 = Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60)
day=day+1;
day_2=day_2+1;
if (day0) //还未开幕
{
//LiveClock1.innerHTML = "现在"+symbol+"天"
LiveClock1.innerHTML = "font
setTimeout("DigitalTime1()",1000)
}
if (day0) //已经开幕
{
//LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"
LiveClock1.innerHTML = "font
setTimeout("DigitalTime1()",1000)
}
if (day==0) //正在开幕
{
//LiveClock1.innerHTML = "现在"+symbol+"天"
LiveClock1.innerHTML = "font
setTimeout("DigitalTime1()",1000)
}
if (day0 day_219) //某某运动会结束
{
//LiveClock1.innerHTML = "现在离"+symbol+"还有"+day+"天"+hour+"小时"+minute+"分"+second +"秒"
LiveClock1.innerHTML = "font
setTimeout("DigitalTime1()",1000)
}
}
// --
/script
!--倒计时Javascript end--
body onload=DigitalTime1()
div id= LiveClock1/div
/body 第三种：小时倒计时
HTML代码:
SCRIPT LANGUAGE="JavaScript"
!--
var maxtime = 60*60 //一个小时，按秒计算，自己调整!
function CountDown(){
if(maxtime=0){
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "距离结束还有"+minutes+"分"+seconds+"秒";
document.all["timer"].innerHTML=msg;
if(maxtime == 5*60) alert('注意，还有5分钟!');
--maxtime;
}
else{
clearInterval(timer);
alert("时间到，结束!");
}
}
timer = setInterval("CountDown()",1000);
//--
/SCRIPT
div id="timer" style="color:red"/div
第四种：最简倒计时
HTML代码:
Script Language="JavaScript"
!-- Begin
var timedate= new Date("January 14,2006");
var times="研究生考试";
var now = new Date();
var date = timedate.getTime() - now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
if (time = 0) ;
document.write("lifont color=#DEDBDE现在离2006年"+times+"还有: font color=#ffffffb"+time +"/b/font 天/font/li");
// End --
/Script
第五种：最简倒计时二
HTML代码:
script language="JavaScript" type="text/javascript"
function djs(){
var urodz= new Date("11/12/2008");
var now = new Date();
var num
var ile = urodz.getTime() - now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni 1)
num=dni+1
else if (dni == 1) num=2
else if (dni == 0) num=1
else num=0
document.write(num)
}
/script
距某某开幕式还有 [script language="JavaScript" type="text/javascript"djs()/script] 天
第五个：Javascript倒计时器 - 采用系统时间自校验
这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下:
span id="clock"00:01:11:00/span
input id="startB" type="button" value="start countdown!" onclick="run()"
input id="endB" type="button" value="stop countdown!" onclick="stop()"
br
input id="diff" type="text"
input id="next" type="text"
script language="Javascript"
/* This notice must be untouched at all times.
countdown.js v. 1.0
The latest version is available at
Copyright (c) 2004 Xinyi.Chen. All rights reserved.
Created 7/30/2004 by Xinyi.Chen.
Web:
E-Mail: chenxinyi1978@hotmail.com
Last modified: 7/30/2004
This program is free software;
you can redistribute it and/or modify it under the terms of the
GNU General Public License as published by the Free Software Foundation;
See the GNU General Public License
at for more details.
*/
var normalelapse = 100;
var nextelapse = normalelapse;
var counter;
var startTime;
var start = clock.innerText;
var finish = "00:00:00:00";
var timer = null;
// 开始运行
function run() {
startB.disabled = true;
endB.disabled = false;
counter = 0;
// 初始化开始时间
startTime = new Date().valueOf();
// nextelapse是定时时间, 初始时为100毫秒
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行
timer = window.setInterval("onTimer()", nextelapse);
}
// 停止运行
function stop() {
startB.disabled = false;
endB.disabled = true;
window.clearTimeout(timer);
}
window.onload = function() {
endB.disabled = true;
}
// 倒计时函数
function onTimer()
{
if (start == finish)
{
window.clearInterval(timer);
alert("time is up!");
return;
}
var hms = new String(start).split(":");
var ms = new Number(hms[3]);
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;
if (ms 0)
{
ms = 90;
s -= 1;
if (s 0)
{
s = 59;
m -= 1;
}
if (m 0)
{
m = 59;
h -= 1;
}
}
var ms = ms 10 ? ("0" + ms) : ms;
var ss = s 10 ? ("0" + s) : s;
var sm = m 10 ? ("0" + m) : m;
var sh = h 10 ? ("0" + h) : h;
start = sh + ":" + sm + ":" + ss + ":" + ms;
clock.innerText = start;
// 清除上一次的定时器
window.clearInterval(timer);
// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse
counter++;
var counterSecs = counter * 100;
var elapseSecs = new Date().valueOf() - startTime;
var diffSecs = counterSecs - elapseSecs;
nextelapse = normalelapse + diffSecs;
diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;
next.value = "nextelapse = " + nextelapse;
if (nextelapse 0) nextelapse = 0;
// 启动新的定时器
timer = window.setInterval("onTimer()", nextelapse);
}
/script
