JavaScript实现简单的数字倒计时

这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下:

0){ document.getElementById(‘shownum').innerHTML = t; t–; setTimeout(function(){runcount(t);},1000); }else{ document.getElementById(‘shownum').innerHTML = ‘倒计时结束!'; } }

  运行该js代码前,需要先添加一个id为shownum的div。

js实现动态倒计时功能 * a是从后台接收到的时间戳,需转换成毫秒单位

rush:js;">
距明年还有: 小时

按天倒计时

HTML代码1:

rush:js;">

HTML代码2:

rush:js;">

距某某开幕式还有 [

某某运动会,按时间提示不同的阶段

HTML代码:

rush:js;">

按小时倒计时

HTML代码:

rush:js;">

Javascript倒计时器 - 采用系统时间自校验

这次利用系统时间自校验倒计时,无需手工调校使得倒计时更为精确,代码及详细注释如下:

rush:js;"> 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);
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...