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的工作原理及HelloWorld简单实现
Struts2工作原理: 一个请求在Struts框架中的处理步骤: 1.客户端初始化一个指向Servlet容器(例如Tomcat)的请求: 2.这个请求经过一系列的过滤器(Filter): 3.接着F ...
- qt creator中编辑Makefile的设置
在qt creator中编辑Makefile时的Tab键总是不能识别,需要这样设置
- flask 定义数据关系(多对一)
多对一 一对多关系反过来就是多对一关系,这两种关系模式分别从不同的视角出发.一个作者拥有多篇文章,反过来就是多篇文章属于同一个作者.为了便于区分,我们使用居民和城市来演示多对一关系:多个居民住在同一个 ...
- Solution about MB STAR C4, MB STAR C5 Update and can not test vehicles problems
Solution about MB Star C4, MB Star C5 Update and can not test vehicles problems 1. Make sure your co ...
- 颜色扩展类--ColorExtensions
/// <summary> /// 颜色扩展类 /// </summary> public static class ColorExtensions { /// <sum ...
- Windows 服务器自动重启定位
有个非常好的小技巧,就是在服务器端命令行,执行systeminfo,能查到服务器上一次重启的时间,依照这个时间在Event Log里再找相应的日志就容易多了. 补充:还能查到这台服务器是虚拟机还是实体 ...
- 爬起点小说 day02
总的来说起点小说还是挺好爬的,就是爬取小说的时候太慢了,4000多本小说就爬了2天一夜 首先爬取的是网页的所有类别,并把类别名存入到mongodb中,链接存到redis中: import scrapy ...
- linux --- 10.常见命令
1.在登录Linux时,一个具有唯一进程ID号的shell将被调用,这个ID是什么()A.NID B.PID C.UID C.CID 2.下面那个用户存放用户密码信息()A./boot B./etc ...
- markdown的css样式(自己写的)
markdown的css样式,这些是我自己配置的,感觉可以的话你可以添加下,不适合自己的话可以仿照第二种自己写个比较好的css样式. 第一种 /* RESET ==================== ...
- Resnet-34框架
import torch import torch.nn as nn import torch.nn.functional as F class ResidualBlock(nn.Module): ' ...