需求构思：本功能想实现的是，一个按钮在页面载入就显示提醒续费，，，倒数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>

web 页面上纯js实现按钮倒计数功能(实时计时器也可以)的更多相关文章

  1. web 页面上纯js实现按钮倒计数功能

    需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...

  2. 解决WEB页面上"焦点控制"一法

    解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...

  3. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  4. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  5. nginx设置反向代理后端jenklins，页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

  6. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  7. 使用tableExport.js直接导出web页面上的table

    1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文 ...

  8. EasyUI-panel 内嵌页面上的js无法被执行

    声明: http://www.jeasyuicn.com/post-49.html 本文引用自GodSon的杰作 http://www.jeasyuicn.com/post-49.html,除修正了个 ...

  9. 2014年web页面上的3D新产品介绍

    地图对于数据的可视化展现有独到的显示方式,首先是底图.地图提供了一个定位的蓝图,让用例数据可以有参考的背景,因此底图通常是线画矢量图或者影像图.互联网上提供这种服务的基本以Google风格,也就是Ti ...

随机推荐

  1. 《数据仓库ETL工具箱》读书笔记

    在本书中,你将学习到以下内容: 规划&设计你的ETL系统 从多种可能的架构中选出最合适的 对实施过程进行管理 管理日常的操作 为ETL过程建立开发/测试/生产环境 理解不同的后台数 ...

  2. BIOS备忘录之IIC(touchpad)设备

    简述BIOS中对IIC device的支持,以touchpad为例. 信息收集 收集平台的硬件信息: 1. IIC controller number(PCH一般包含多个controller,我们使用 ...

  3. rabbitmq安装与高可用集群配置

    rabbitmq版本:3.6.12 rabbitmq安装 1.安装openssl wget http://www.openssl.org/source/openssl-1.0.0a.tar.gz &a ...

  4. python 的运行方式和基础变量

    机器语言:直接用计算机能听的懂得二进制去编写程序,需要了解硬件细节 优点:执行效率高 缺点:开发效率低汇编语言:用英文单词取代二进制指令去编写程序 优点:开发效率高于机器语言 缺点:执行效率低于机器语 ...

  5. Python新手入门英文词汇（1-1）

    英文词汇总结一.交互式环境与print输出 1.print:打印/输出2.coding:编码3.syntax:语法4.error:错误5.invalid:无效6.identifier:名称/标识符7. ...

  6. [译]Quartz.NET 3.x 教程

    译者注: 最近有点小浮躁,找点事做做平静下内心的焦作,干脆翻译下 Quartz.NET 3.x Tutorial 好了. Quartz.NET 3.x 教程 选择课程:带划线的表示没完成 课程 1: ...

  7. Learning-Python【9】：Python文件操作

    1.什么是文件 文件是操作系统提供给用户或应用程序的一种虚拟单位,该虚拟单位直接映射的是硬盘空间.通俗点说,文件就是存放数据的地方 2.为何要处理文件 用户或应用程序直接操作文件(读/写)就被操作系统 ...

  8. Qt 程序获取程序所在路径、用户目录路径、临时文件夹等特殊路径的方法

    Qt 程序获取程序所在路径.用户目录路径.临时文件夹等特殊路径的方法 经常我们的程序中需要访问一些特殊的路径,比如程序所在的路径.用户目录路径.临时文件夹等.在 Qt 中实现这几个功能所用的方法虽然都 ...

  9. js 数组元素遍历

    <html> <body> <script type="text/javascript"> var x var mycars = new Arr ...

  10. Linux 环境下jmeter 安装和配置

    1. 下载和安装JDK vim /etc/profile export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_92 export JRE_HOME=$JAVA_HOME/jr ...