js选中html的数字设置倒计时,JavaScript实现简单的数字倒计时

这篇博客详细介绍了如何使用JavaScript实现一个倒计时功能。通过`run`和`stop`函数控制计时器的开始和结束,`onTimer`函数处理时间的递减和格式化。博客还涉及到时间校验和调整,以确保计时的准确性,并通过`window.onload`事件确保页面加载后按钮状态的正确设置。此外,还展示了如何使用`window.clearTimeout`和`window.setInterval`来管理定时器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 开始运行

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

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值