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>

  • 相关阅读:
    字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD
    Context Application 使用总结 MD
    RxJava RxPermissions 动态权限 简介 原理 案例 MD
    Luban 鲁班 图片压缩 MD
    FileProvider N 7.0 升级 安装APK 选择文件 拍照 临时权限 MD
    组件化 得到 DDComponent JIMU 模块 插件 MD
    gradlew 命令行 build 调试 构建错误 Manifest merger failed MD
    protobuf Protocol Buffers 简介 案例 MD
    ORM数据库框架 SQLite 常用数据库框架比较 MD
    [工具配置]requirejs 多页面,多入口js文件打包总结
  • 原文地址:https://www.cnblogs.com/pyman/p/5103014.html
Copyright © 2011-2022 走看看