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>