<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 获取验证码 </title>
<style>
#btn1,
#btn2 {
/* 隐藏按钮 */
display: none;
float: left;
margin:5px 20px 0 0;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入验证码">
<input type="button" value="获取验证码" id="btn">
<br>
<input type="button" value="确认" id="btn1">
<input type="button" value="取消" id="btn2">
<script>
// 找到元素
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// 添加点击事件
btn.onclick = function () {
// 定时时间
var miao = 5;
// 点击后改变文本
btn.value = miao + "秒后重新获取";
// 禁止用户点击
btn.disabled = true;
// 显示隐藏按钮
btn1.style.display = "block";
btn2.style.display = 'block';
// 添加定时功能
var timerID = setInterval(function () {
miao--;
btn.value = miao + "秒后重新获取";
if (miao == 0) {
clearInterval(timerID);
btn.value = "获取验证码";
// 解除禁止用户点击
btn.disabled = false;
}
}, 1000)
}
document.getElementById('btn1').onclick = function () {
var timerID = setInterval(function () {
// 网页跳转
window.open('https://www.baidu.com');
}, 1000);
}
document.getElementById('btn2').onclick = function () {
// 关闭网页，关当前自己这个网页
window.close();
window.open('./简单获取验证码.html');
}
</script>
</body>
</html>
网友评论