<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
input{
outline: none;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 10px;
background-color: #fff;
color: #444;
}
</style>
<script src='common.js'></script>
<script type="text/javascript">
window.onload = function(){
$id('send').onclick = function(){
var count = 5;
if(this.timer){
clearInterval(this.timer);
}
var that = this;
this.timer = setInterval(function(){
that.value = '还剩' + count + '秒';
count--;
that.style.backgroundColor = 'skyblue';
that.style.color = '#fff';
that.disabled = true;
if(count < 0){
clearInterval(that.timer);
that.value = '点击重新发送验证码';
that.style.backgroundColor = '#fff';
that.style.color = '#444';
that.disabled = false;
}
}, 1000);
}
}
</script>
</head>
<body>
<input type="text" >
<input type="button" id="send" value="点击获取手机验证码">
</body>
</html>