案例--点击倒计时用户注册

最新推荐文章于 2023-07-17 02:56:34 发布

Jikel

最新推荐文章于 2023-07-17 02:56:34 发布

阅读量113

点赞数 1

分类专栏： js有趣小案例

本文链接：https://blog.csdn.net/weixin_54902466/article/details/117885450

版权

js有趣小案例专栏收录该内容

39 篇文章 1 订阅

订阅专栏

在这里插入图片描述
点击后

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 40px;
        }

        ul {
            padding: 0;
            list-style: none;
        }

        li {
            margin: 10px 0;
            line-height: 26px;
            display: flex;
        }

        input,
        button {
            padding: 0;
            margin-left: 10px;
            display: block;
        }

        input {
            width: 190px;
            outline: none;
        }

        button {
            width: 120px;
        }

        .verify {
            width: 60px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            您的血脉:
            <input type="text">
        </li>
        <li>
            变身类型:
            <input type="text" class="verify">
            <button id="btn">变成光!</button>
        </li>
    </ul>
    <script>
        let btn = document.getElementById('btn')
        btn.addEventListener('click', function () {
            this.disabled = true
            let i = 6
            btn.innerText = `收到召唤,等待变身(${i})!`
            let stop = setInterval(
                function () {
                    i--
                    btn.innerText = `收到召唤,等待变身(${i})!`
                    if (i === 0) {
                        clearInterval(stop)
                        btn.disabled = false
                        btn.innerText = `再次变成光!`
                    }
                }, 1000)
        })
    </script>
</body>

</html>

Jikel

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例--点击倒计时用户注册

点击后倒计时结束<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> b.
复制链接

扫一扫