前言：
目前你们对“js制作倒计时”大概比较着重，大家都想要了解一些“js制作倒计时”的相关内容。那么小编在网摘上收集了一些关于“js制作倒计时””的相关知识，希望咱们能喜欢，看官们一起来学习一下吧！Javascript：禁止按钮，3种方法实现短信验证倒计时
表单中经常会用到手机短信验证或者邮箱验证，点击按钮发送验证码后会倒计时，然后按钮会成灰色不可点击状态，或者点击无效。这可以预防不法分子或者机器刷验证码，下面讲一下使用禁止按钮实现短信验证倒计时，你知道有几种方法呢？
禁止按钮短信验证
首先来了解一下禁止按钮的实现和原理：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn = document.getElementById('btn');
//禁止按钮
oBtn.disabled = false;
oBtn.onclick = function ()
{
oBtn.disabled = true;
alert(oBtn.value);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="点我试试">
</body>
</html>
短信验证
禁止按钮应用：短信验证倒计时按钮3种方法
1、第一种方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn = document.getElementById('btn');
var timer = null;
var n = 5;
oBtn.onclick = function ()
{
oBtn.disabled = true;
timer = setInterval(function(){
n--;
oBtn.value = n + '秒之后重新发送';
if (n == 0) {
clearInterval(timer);
oBtn.value = '5秒之后重新发送';
oBtn.disabled = false;
n = 5;
}
}, 1000);
}
}
</script>
</head>
<body>
<input type="button" value="5秒之后重新发送" id="btn">
</body>
</html>
短线验证按钮倒计时方法
2、第二中方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn = document.getElementById('btn');
var timer = null;
var n = 5;
oBtn.onclick = function ()
{
this.disabled = true;
var _this = this;
// alert(_this);
timer = setInterval(function(){
// alert(_this);
n--;
_this.value = n + '秒之后重新发送';
if (n == 0) {
clearInterval(timer);
_this.value = '5秒之后重新发送';
_this.disabled = false;
n = 5;
}
}, 1000);
}
}
</script>
</head>
<body>
<input type="button" value="5秒之后重新发送" id="btn">
</body>
</html>
短信验证倒计时
3、第三种方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn = document.getElementById('btn');
var timer = null;
var n = 5;
var flag = false;
oBtn.onclick = function ()
{
if (flag) {
return;
}
flag = true;
var _this = this;
// alert(_this);
timer = setInterval(function(){
// alert(_this);
n--;
_this.value = n + '秒之后重新发送';
if (n == 0) {
clearInterval(timer);
_this.value = '5秒之后重新发送';
flag = false;
n = 5;
}
}, 1000);
}
}
</script>
</head>
<body>
<input type="button" value="5秒之后重新发送" id="btn">
</body>
</html>
请关注键盘码农，把你想知道的问题在下面留言评论，更新你想要的答案，专为你解答！
标签： #js制作倒计时 #js倒计时5秒关闭窗口代码 #js屏蔽点击
