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>
web 页面上纯js实现按钮倒计数功能(实时计时器也可以)的更多相关文章
- web 页面上纯js实现按钮倒计数功能
需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...
- 解决WEB页面上"焦点控制"一法
解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
- nginx设置反向代理后端jenklins,页面上的js css文件无法加载
转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- 使用tableExport.js直接导出web页面上的table
1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文 ...
- EasyUI-panel 内嵌页面上的js无法被执行
声明: http://www.jeasyuicn.com/post-49.html 本文引用自GodSon的杰作 http://www.jeasyuicn.com/post-49.html,除修正了个 ...
- 2014年web页面上的3D新产品介绍
地图对于数据的可视化展现有独到的显示方式,首先是底图.地图提供了一个定位的蓝图,让用例数据可以有参考的背景,因此底图通常是线画矢量图或者影像图.互联网上提供这种服务的基本以Google风格,也就是Ti ...
随机推荐
- 极致21点开发DAY2
今天完成的主要内容时MainScene场景中设置面板的开发.游戏逻辑:点击设置按钮,弹出音乐设置弹框,弹框内容包括音乐的打开与关闭,退出游戏. 点击退出游戏,弹出退出游戏确认面板.效果图: 1.首先在 ...
- KVM 通过virsh console连入虚拟机
新安装一台虚拟机后,是无法通过virsh console 命令连入虚拟机中的,这时我们需要开启虚拟机的console功能. 一.添加ttyS0的许可,允许root登陆 [root@localhost ...
- kafka消费者实时消费数据存入hdfs java scalca 代码
hadoop-client依赖很乱 调试很多次cdh版本好多jar没有 用hadoop2.7.3可以 自定义输出流的池子进行流管理 public void writeLog2HDFS(String p ...
- three.js 3d三维网页代码加密的实现方法
http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...
- nginx-编译安装 第一章
nginx 第一章:编译安装 nginx 官网网站:http://nginx.org/en/ 1.基础说明 基本HTTP服务器功能其他HTTP服务器功能邮件代理服务器功能TCP/UDP代理服务器功能体 ...
- Docker Swarm 创建服务
Docker Swarm 创建服务 环境: 系统:Centos 7.4 x64 应用版本:Docker 18.09.0 管理节点:192.168.1.79 工作节点:192.168.1.78 工作节点 ...
- vscode设置代码块
需要注意一点是,内容主体里面带有缩进的地方不能用 Tab,只能用空格
- Redis setnx命令 分布式缓存
setnx命令 将 key 的值设为 value,当且仅当 key 不存在. 若给定的 key 已经存在,则 SETNX 不做任何动作. SETNX 是SET if Not eXists的简写. re ...
- Python入门 函数式编程
高阶函数 map/reduce from functools import reduce def fn(x, y): return x * 10 + y def char2num(s): digits ...
- 【笔记】Cocos2dx学习笔记
自建场景类 自建场景类BaseScene继承与Scene类,在init函数中添加了默认的,键盘与鼠标事件的响应,添加了一个用于读取XML文件的字典,添加了一个结束场景的方法. 类的声明代码如下: #i ...