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 ...
随机推荐
- 第五篇——Struts2的默认Action
默认Action 1.当访问action不存在时,可以通过制定默认action的方式避免出现错误代码页面: 2.使用default-action-ref 指定默认 action. 项目实例 1.项目结 ...
- kubernetes1.4新特性(一):支持sysctl命令
sysctl是一个允许改变正在运行中的Linux系统内核参数的接口.可以通过sysctl修改Linux系统内核中的TCP/IP 堆栈和虚拟内存系统的高级选项,而且不需要重新启动Linux系统,就可以实 ...
- js获取本月最后一天
function getLastDay() { var seperator1 = "-"; var date=new Date; var new_mo ...
- container(容器),injection(注入)
1.container为什么会出现? 在书写程序的时候,我们常常需要对大量的对象引用进行管理.为了实现有效的归类管理,我们常常将同类的引用放置在同一数据容器中.由于数据容器中存放了我们随时可能需要使用 ...
- 批处理学习之Bat命令——获取当前盘符、当前目录、上级目录
命令 当前盘符:%~d0 当前路径:%cd% 当前执行命令行:%0 当前bat文件路径:%~dp0 当前bat文件短路径:%~sdp0 测试 下载testBatPath.bat测试文件,双击.bat运 ...
- 请求headers处理
有时在请求一个网页内容时,发现无论通过GET或者是POST以及其他请求方式,都会出现403错误.这种现象多数是由于服务器拒绝了您的访问,那是因为这些网页为了防止恶意采集信息,所使用的反爬虫设置.此时可 ...
- CSS【04】:CSS组合选择器
组合选择器 群组(并集)选择器 作用:给所有选择器选中的标签设置属性,可以同时控制多个选择器 格式: 选择器1, 选择器2 { 属性: 值; } 注意点: 必须使用,来连接 选择器可以使用标签名称.i ...
- chrome 调试功能使用说明
单文件搜索 ctrl+f 全局搜索 ctrl+shift+f
- Katy Perry - E.T.
作曲 : Katy Perry, Łukasz Gottwald, Max Martin, Joshua Coleman 作词 : Katy Perry, Łukasz Gottwald, Max M ...
- English trip EM2-LP-4B At School Teacher:Russell
课上内容(Lesson) Where is Loki a student? Loki is in Meten, BaobaoStreet, Chengdu. What is he studying? ...