web 页面上纯js实现按钮倒计数功能(实时计时器也可以)

需求构思：本功能想实现的是，一个按钮在页面载入就显示提醒续费，，，倒数60秒后，完成提醒功能，可以按另外一个页面跳转到主页。

参考网上的大神，实现如下：Button2倒数，Button3跳转，在页面上添加两个html按钮。

Button2代码

<input id="Button2" type="button" value="提醒续费倒计时" onclick="return Button2_onclick()" />
        <script type="text/javascript">
var wait=60;
function time(o) {
    if (wait == 0) {
      o.removeAttribute("disabled");
      o.value = "提醒续费倒计时";
      wait = 60;    //设置秒数
    } else {
      o.setAttribute("disabled", true);
      o.value = wait + "提醒续费倒计时";
      wait--;
      setTimeout(function() {
        time(o)
      },
      1000)
           }
           Button3.disabled = false;            //使另外一按钮不可用
}
document.getElementById("Button2").onclick = function() { time(this); }

Button3代码

测试ok。谢谢大神的参考例子

下面的例子,可以保存为html,则是一个网页上的实时计时器特别说明: 理论上 ss%100==0 但实际测试 ss%161==0更接近实际时间

<html> <head> <title> hhw js timer 计时器 </title>
</head>
<body> <script language="javascript">
           var se, h = 0, m = 0, s = 0, ss = 1;
           function second()
    { if((ss%161)==0){s+=1;ss=1;}
     if (s > 0 && (s % 60) == 0)
      { m += 1; s = 0; }
      if (m > 0 && (m % 60) == 0)
    {h+=1;m=0;}
    t = h + "时" + m + "分" + s + "秒" + ss + "毫秒";
document.getElementById("showtime").value=t; ss+=1; }
function startclock() {se = setInterval("second()", 1);document.getElementById('s_start').disabled = true;}
function pauseclock(){clearInterval(se);document.getElementById('s_start').disabled = false; }
function stopclock() { clearInterval(se); ss = 1; h = m = s = 0; document.getElementById('s_start').disabled = false; }
</script>
<input name="s_start" type="button" value="开始计时" onclick="startclock()"
        id="s_start">
<input name="s" type="button" value="暂停计时" onclick="pauseclock()">
<input name="s" type="button" value="停止计时" onclick="stopclock()">
<input name="showtime" id="showtime" type="text" value="0时0分0秒">
</body> </html>

秒客网

web 页面上纯js实现按钮倒计数功能(实时计时器也可以)

相关文章