发送验证码

需求：
1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时；
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。

实现原理：
html部分：两个按钮和一个文本框
在这里插入图片描述
css部分：设置颜色

js部分：判断文本框的值是不是0505输出提示框是否成功。通过绑定点击事件使两个按钮交换禁用，再使用计时器60s倒计时。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> button{background-color: aquamarine;border: 1px solid aquamarine;border-radius: 20%;}#put1{background-color: aquamarine;border: 1px solid aquamarine;border-radius: 20%;}</style>
</head>
<body><input type="text" id="text1"><button id="send">发送</button><input type="button" value="提交" id="put1" disabled><script>var put1=document.getElementById("put1")var send=document.getElementById("send")var i=60;   var text1=document.getElementById("text1")put1.onclick=function(){var txt1=text1.valueif(txt1=="0505"){alert("成功")}else{alert("错误")}}send.onclick=function(){send.setAttribute("disabled","true");put1.removeAttribute("disabled");var timer=setInterval(function(){if(i!=0){i--send.innerHTML=i}else{send.innerHTML="发送"clearInterval(timer)}},1000)    }</script>
</body>
</html>