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>

  • 相关阅读:
    使用session页面控制登录入口及购物车效果的实现
    php中会话保持 session 与cooker
    php多关键字查询
    php后台编辑关联数据
    php后台增删改跳转
    php登录注册页面及加载
    [bzoj4098] [Usaco2015 Open]Palindromic Paths
    [bzoj1969] [Ahoi2005]LANE 航线规划
    4395: [Usaco2015 dec]Switching on the Lights
    [bzoj2789] [Poi2012]Letters
  • 原文地址:https://www.cnblogs.com/pyman/p/5103014.html
Copyright © 2011-2022 走看看