zoukankan      html  css  js  c++  java
  • 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代码

     <input id="Button3" type="button" value="button"
                onclick="javascript:window.location.href='Default_admin.aspx'"
                disabled="disabled" />

    测试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>

  • 相关阅读:
    老年人微信教程手绘版|微信入门教程1
    微信网页版朋友圈在哪?怎么找不到
    如何用<dl>标签做表格而不用table标签
    600万个!520元的微信红包发了这么多!
    微信红包最高能发520元啦!只限今天!
    微信和WeChat的合并月活跃账户数达到7.62亿了
    excel隔行选中内容如何操作
    各大公司广泛使用的在线学习算法FTRL详解
    在线最优化求解(Online Optimization)之五:FTRL
    在线最优化求解(Online Optimization)之四:RDA
  • 原文地址:https://www.cnblogs.com/pyman/p/5103014.html
Copyright © 2011-2022 走看看