话不多说,上代码啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="checkCodeBtn" style="width: 150px;height: 150px;text-align: center" data-status="ready">获取验证码</div>
<script>
var btnDom = document.getElementById("checkCodeBtn");
(function getCheckCode(dom,timer) {
this.timer = timer || 60;
this.dom = dom;
this.status = dom.dataset['status'] || null;
var self = this;
var out;
function sendSms() {
var st = self.status;
var time = self.timer;
if (time === 0){
self.dom.style.color = "black";
self.status = 'ready';
self.timer = timer;
self.dom.innerHTML = "获取验证码"
clearTimeout(out)
}else {
out = setTimeout(function () {
self.timer --;
self.dom.innerHTML = self.timer;
self.status = "loading"
sendSms()
},1000)
}
}
this.dom.onclick = sendSms
})(btnDom,5)
</script>
</body>
</html>