JavaScript实现获取动态密码倒计时效果demo

最新推荐文章于 2022-10-24 20:17:13 发布

herbertyoung

最新推荐文章于 2022-10-24 20:17:13 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript 倒计时动态密码

本文链接：https://blog.csdn.net/yhb241/article/details/46639531

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>动态密码倒计时效果demo</title>
<style>
	html, body{
	    width: 100%;
	    /*max-width: 640px;*/
	    height: 100%;
	    overflow-x: hidden;
	    margin: 0 auto;
	    background-color: #cf121c;
	}
	.login_box{
		width: 90%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50px;
		margin: auto;
		background: #eee;
		border-radius: 5px;
		box-sizing: border-box;
		padding: 10px;
	}
	form>div{
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}
	label{
		color: #4388cd;
	}
	.phone, .password{
		background: transparent;
		border: solid 1px #4388cd;
		margin-left: 6px;
		height: 30px;
		border-radius: 5px;
		padding: 0 6px;
		outline: none;
	}
	.phone{
		width: 60%;
	}
	.password{
		width: 30%;
	}
	.btn_password{
		width: 28%;
		display: inline-block;
		margin-left: 2%;
		height: 30px;
		line-height: 30px;
		border-radius: 5px;
		outline: none;
		background-color: #00d936;
		color: #eee;
	}
	.btn_login{
		width: 60%;
		display: inline-block;
		height: 30px;
		line-height: 30px;
		border-radius: 5px;
		outline: none;
		background-color: #ff5c26;
		color: #eee;
	}
</style>
</head>
<body>
	<div class="login_box">
		<form>
			<div>
				<label>手机号码</label><input type="text" class="phone" id="phone">
			</div>
			<div>
				<label>动态密码</label><input type="text" class="password" id="password"><span class="btn_password" id="btn_password">动态密码</span>
			</div>
			<div>
				<span class="btn_login" id="btn_login">登录</span>
			</div>
		</form>
	</div>
	<script>
		window.onload = function(){
			new Timer(30).init();
		}
		var btn_password = document.getElementById('btn_password');
		function Timer(seconds){
			if(!(this instanceof Timer)){
				return;
			}
			this.seconds = seconds || 30;
			return this;
		}
		Timer.prototype = {
			init: function(){
				this.count = this.seconds;
				this.initEvent();
				return this;
			},
			initEvent: function(){
				var _this = this;
				btn_password.addEventListener('touchend', _this.start.bind(this), false);
			},
			start: function(){
				console.log('start');
				this._pause = false;
				this.timer || (this.timer = setTimeout(this.tick.bind(this), 1e3), btn_password.innerHTML = '30');
			},
			end: function(){
				console.log('end');
				this._pause = true;
				clearTimeout(this.timer);
				this.timer = null;
				btn_password.innerHTML = '重新获取';
				this.reset();
			},
			tick: function(){
				this._pause ? void 0 : (this.count--, this.count < 0 ? this.end() : void 0);
				this._pause || this.renderTime();
				this._pause || (this.timer = setTimeout(this.tick.bind(this), 1e3));
			},
			reset: function(){
				this.count = this.seconds;
			},
			renderTime: function(){
				btn_password.innerHTML = this.count;
			}
		}
	</script>
</body>
</html>