<!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实现自动倒计时的更多相关文章

  1. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  2. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  3. 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  4. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  5. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  6. JS简单的倒计时(代码优化)

    倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ funct ...

  7. js验证码有效时间倒计时

    js验证码有效时间倒计时 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  8. js团购倒计时函数代码

    <h1>团购啦!</h1><p>还剩<span id="times"></span></p> <SCR ...

  9. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

随机推荐

  1. serialVersionUID要注意以下几点：

    今天在使用eclipse开发的时候,遇到一个warning,看到warning我总觉得不爽,使用自动修复后,发现eclipse在代码中加入了“private static final long ser ...

  2. .htaccess文件详解

    启用.htaccess,需要修改httpd.conf,启用AllowOverride,并可以用AllowOverride限制特定命令的使用 笼统地来说,.htaccess可以帮我们实现包括:文件夹密码 ...

  3. php闭包支持

    匿名函数提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: $func = function() { }; //带结束符 可以看到 ...

  4. 百度或者Google---SEO优化（转载）

    google 和百度的技术差别: 1.百度还认不清哪个是原创的 2.google蜘蛛不够百度快 4.google排名结果随时变化 流量.权重.权威.内容.用户体验.用户关注度等等细节的排名,已表 达了 ...

  5. C# 获取时间差（几天前，几小时前，几分钟前，几秒前）

    #region 获取时间差string GetTime(BsonString getTime) /// <summary> /// 获取时间差 /// </summary> / ...

  6. jquery基础总结

    什么是jQuery?        就是一个JavaScript函数库,开源的.jQuery能做什么        JavaScript是做什么的,jQuery就是做什么的,Jquery是对javas ...

  7. Javascript网页摇一摇

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

  8. matlab之round any size rat isscalar ismatrix mean find max

    1.round : 四舍五入 例子:a = [-1.9, -0.2, 3.4, 5.6, 7.0, 2.4+3.6i] round(a): [-2  0  3  6  7  2  4] 2.butte ...

  9. 基于Redis的短链接设计思路

    [Markdown阅读][1] 今天上班的时候收到一个需要短链接的需求,之前的做法都是使用了新浪的短链接API(https://api.weibo.com/2/short_url/shorten.js ...

  10. 是智能手机推动windows xp系统停止服务吗

    昨天是windows xp系统停止服务的大限,各大媒体争相报道,漫天铺地的xp消息充斥网络,xp这个词的百度指数这段时间从4月1日的8411也开始猛涨,特别是这两天4月7日的36470飙升到4月8日的 ...