js短信发送案例

最新推荐文章于 2023-08-16 20:39:19 发布

浪流人

最新推荐文章于 2023-08-16 20:39:19 发布

阅读量171

点赞数

分类专栏： WEB 文章标签： javascript css3 前端

本文链接：https://blog.youkuaiyun.com/RUBGH/article/details/120959761

版权

HTML JavaScript 定时器倒计时按钮交互

关键词由优快云通过智能技术生成

WEB 专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>doc</title>
    <style>
        div{
            margin: 200px;
        }
        span{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }

    </style>
</head>
<body>
    <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        console.log()
        var time=3;
        btn.addEventListener("click", function (){
            btn.disabled=true;
            var timer = setInterval(function (){
                if (time==0)                {
                    btn.disabled=false;
                    btn.innerHTML='发送';
                    clearInterval(timer);
                    time=3;
                }else{
                    btn.innerHTML='还剩下'+time+'秒'
                    time--;
                }
            },1000)
        })
    </script>
</body>
</html>