<!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>正则表达式</title>
<style>
.user{
width: 225px;
}
.fs{
width: 80px;
}
</style>
</head>
<body>
<form action="#" method="get">
<input type="text" class="user" value="" /><br>
<input type="password" class="pow" value=""/>
<button onclick="fs()" class="fs">发送验证码</button><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>
<script>
function fs() {
// console.log(document.querySelector("button").innerHTML);
let user=document.querySelector(".user").value;
// console.log(user);
var test=/\d{11}/;
if (test.test(user)){
// alert("手机号验证通过");
let set=setInterval("set()",1000);
let timeout=setTimeout(clearInterval(set),5000)
}else{
alert("格式不对,");
let newwindow=window.open("http://www.baidu.com");
}
}
let i=5;
function set(){
if(i>=0){
document.querySelector("button").innerHTML=`(${i})`;
// console.log(document.querySelector("button").innerHTML);
i--;
// console.log(i);
}else{
document.querySelector("button").innerHTML=`发送验证码`;
}
}
</script>
</body>
</html>
js案例:点击获取验证码后,文本换成倒计时
最新推荐文章于 2024-07-20 21:16:51 发布