JS实现自动倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>JS实现自动倒计时30秒后按钮才可用</title>
<meta name="keywords" content="javascript,倒计时" />
<meta name="description" content="" /> <style>
.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
.demo{width:500px; margin:60px auto 10px auto}
}
.demo p{line-height:36px}
.button {
display: inline-block;
cursor:pointer;
outline: none;
text-align: center;
text-decoration: none;
font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #606060;
border: solid 1px #b7b7b7;
background: #ededed;
}
.button:hover {
text-decoration: none;
background: #fff;
}
.button:active {
position: relative;
top: 1px;
color: #999;
} </style>
</head> <body>
<div id="header">
<div id="logo"><h1><a href="" title=""></a></h1></div>
</div>
<div id="main">
<h2 class="top_title"><a href=""></a></h2> <div class="demo">
<p>示例一:要求用户阅读完条款内容才能激活按钮</p>
<form action="" method="post" name="agree">
<input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" id="agree_btn" name="agreeb">
</form>
<br/>
<br/>
<br/>
<p>示例二:要求用户激活短信通道向用户手机发送验证码</p>
<form action="" method="post" name="myform">
<input type="button" class="button" value="获取手机验证码" id="phone_btn" name="phone" onclick="showtime(30)">
</form>
</div>
</div>
<script>
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
if(num == secs) {
document.agree.agreeb.value =" 我 同 意 ";
document.agree.agreeb.disabled=false;
}
else {
var printnr = secs-num;
document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
}
} function showtime(t){
document.myform.phone.disabled=true;
for(i=1;i<=t;i++) {
window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
} } function update_p(num,t) {
if(num == t) {
document.myform.phone.value =" 重新发送 ";
document.myform.phone.disabled=false;
}
else {
printnr = t-num;
document.myform.phone.value = " (" + printnr +")秒后重新发送";
}
} </script> <div id="footer"> </div> </body>
</html>
JS实现自动倒计时的更多相关文章
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- JS简单的倒计时(代码优化)
倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ funct ...
- js验证码有效时间倒计时
js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...
- js团购倒计时函数代码
<h1>团购啦!</h1><p>还剩<span id="times"></span></p> <SCR ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
随机推荐
- pthread多线程编程的学习小结
pthread多线程编程的学习小结 pthread 同步3种方法: 1 mutex 2 条件变量 3 读写锁:支持多个线程同时读,或者一个线程写 程序员必上的开发者服务平台 —— DevSt ...
- PHP iconv函数字符串转码导致截断问题
1.iconv函数原型 string iconv ( string $in_charset , string $out_charset , string $str ) in_charset:输入的字符 ...
- Ajax相同url的请求,IE缓存问题
最近做一个小项目,其中的一个页面如下,需要实现异步改变“是否推荐”的状态. 请求的代码如下: $.get("/Contorller/Edit", { id: id }, funct ...
- HDOJ 4731 Minimum palindrome
Minimum palindrome Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- [Educational Codeforces Round 16]E. Generate a String
[Educational Codeforces Round 16]E. Generate a String 试题描述 zscoder wants to generate an input file f ...
- sqlMapConfig.xml配置文件详解
sqlMapConfig.xml配置文件详解: Xml代码 Xml代码 <? xml version="1.0" encoding="UTF-8" ?& ...
- Centos6.7安装Apache2.4+Mysql5.6+Apache2.4
首先说下思路,因为一开始系统上已经跑了一套完成的 PHP 环境,那时候都是快速自动安装的,如果是跑一些5.3以下版本的话,很简单,几个指令,10分钟搞定了. 但现在要升级,彻底一点的话,唯有推倒重来了 ...
- sort如何按指定的列排序
<1>[root@localhost company]# cat test 06d7 145 4192542506e1 ...
- 14.约瑟夫环问题[JosephusProblem]
[题目] n个数字(0,1,…,n-1)形成一个圆圈,从数字0开始,每次从这个圆圈中删除第m个数字(第一个为当前数字本身,第二个为当前数字的下一个数字).当一个数字删除后,从被删除数字的下一个继续删除 ...
- Android 中的selector
今天做程序时,发现了selector 选择器不单单能用系统的自定义属性(比如, <item android:state_selected="true" android:co ...