短信验证码发送

最新推荐文章于 2024-07-18 10:24:18 发布

晓晓2022

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/qq_45911604/article/details/123589154

版权

前端基础专栏收录该内容

22 篇文章 1 订阅

订阅专栏

短信验证码发送

效果展示：
在这里插入图片描述
代码展示：

<!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>
</head>
<body>
    <p>短信验证码发送:</p>
    <input type="text"><button>发送</button>
    <script>
        var input = document.querySelector('input');
        var btn = document.querySelector('button');

        btn.addEventListener('click',function (params) {
            btn.disabled = true;//按钮禁用
            var time=20;//定义间隔时间再发送
            //时间10秒,间隔1秒
            var timer = setInterval(function (params) {
                if(time == 0)
                {
                    clearInterval(timer);//清除定时器
                    //清除定时器相当于结束循环
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                }else
                {
                    btn.innerHTML = ''+time+'秒后再发送';
                    time--;
                }
            },1000);
        });
    </script>
</body>
</html>

注意事项：
1，setInterval()相当于一个while()循环，只不够这个循环有一个时间计数器。所以在进行业务设计时，注意定时器是否清除。

setInterval(function (params)
 {
      ........
 },1000);

2，全局变量和局部变量的区别和联系

var timer = setInterval(function (params)
{
	clearInterval(timer);//清除定时器
}

在这里的timer是可以被函数拿到的。

3，表单内容修改一般都用， input.value。 button按键
button.innerHTML。

晓晓2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
短信验证码发送

短信验证码发送效果展示：代码展示：<!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">
复制链接

扫一扫