<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>再次获取验证码</title>

</head>

<body>

<input type="text">

<button>获取验证码</button>

<script>

var btn = document.querySelector('button');

var t = 10;


//设置监听事件，按下按钮后禁用按钮

btn.addEventListener('click',function(){

　　btn.disabled = true;

　　//添加定时器，时间间隔为一秒

　　var time = setInterval(function(){

　　　　if(t==0){//如果倒计时等于0了，清除计时器，恢复按钮，将t重置为10，否则按钮中文字改变，t递减。

　　　　　　clearInterval(time);

　　　　　　btn.disabled=false;

　　　　　　btn.innerHTML='获取验证码';

　　　　　　t=10;

　　　　}else{

　　　　　　btn.innerHTML='您可以在'+t+'秒后再次获取';

　　　　　　t--;

　　　　}

　　}, 1000);


})

</script>

</body>

</html>