实用javascript倒计时器

7个月前 (05-09 15:34)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确,用户只要点击按钮即可,根据自己的需求来修改时间。

<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<span id="clock_wwwwumingren">00:00:50:00</span>   
<input id="start_wwwwumingren_b" type="button" value="开始倒计时
" onclick="run()">   
<input id="end_www_wuming_ren" type="button" value="停止倒计时"onclick="stop_wwwwuming_ren()">   
<br>   
<input id="diff" type="text">   
<input id="next" type="text">   
<script language="Javascript">
var normalelapse = 100;   
var nextelapse = normalelapse;   
var counter;    
var startTime;   
var start = clock_wwwwumingren.innerText;    
var finish = "00:00:00:00";   
var timer = null;   
// 开始运行   
function run() {   
start_wwwwumingren_b.disabled = true;   
end_www_wuming_ren.disabled = false;   
counter = 0;   
// 初始化开始时间   
startTime = new Date().valueOf();   
// nextelapse是定时时间, 初始时为100毫秒   
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行   
timer = window.setInterval("onTimer()", nextelapse);    
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 
// 停止运行   
function stop_wwwwuming_ren() {   
start_wwwwumingren_b.disabled = false;   
end_www_wuming_ren.disabled = true;   
window.clearTimeout(timer);   
}   
window.onload = function() {   
end_www_wuming_ren.disabled = true;   
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 
// 倒计时函数   
function onTimer()   
{   
if (start == finish)   
{   
window.clearInterval(timer);   
alert("time is up!");   
return;   
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)   
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]);   
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)    
ms -= 10;   
if (ms < 0)   
{   
ms = 90;   
s -= 1;   
if (s < 0)   
{   
    s = 59;   
    m -= 1;   
}   
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)     
if (m < 0)   
{   
    m = 59;   
    h -= 1;   
}   
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)   
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_wwwwumingren.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);    
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/926.html

回帖

实用javascript倒计时器 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息