js基础3作业5
2018-08-21 本文已影响0人
HavenYoung
短信倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信倒计时</title>
<style type="text/css">
#dinput {
width: 100px;
float: left;
}
#btnyz {
width: 80px;
float: left;
display: block;
}
#reget {
width: 80px;
display: none;
float: left;
}
#reyz {
width: 80px;
display: none;
float: left;
}
</style>
</head>
<body>
<input id="dinput" value="请输入验证码" />
<button id="btnyz" onclick="getyz()">获取验证码</button>
<div id="reget"></div>
<button id="reyz" onclick="getyz()">重新获取</button>
</body>
</html>
<script type="text/javascript">
var obtnyz = document.getElementById('btnyz')
var oreget = document.getElementById('reget')
var oreyz = document.getElementById('reyz')
var timer = null
var count = 10
function getyz() {
obtnyz.style.display = 'none'
oreyz.style.display = 'none'
oreget.style.display = 'block'
timer = setInterval(function() {
count--
oreget.innerHTML = count
if(count == 0) {
clearInterval(timer)
count = 10
oreget.style.display = 'none'
oreyz.style.display = 'block'
}
}, 1000)
}
</script>
