实现简单的广告倒计时

最新推荐文章于 2022-03-03 21:00:04 发布

风继续吹&

最新推荐文章于 2022-03-03 21:00:04 发布

阅读量175

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/qq_48930299/article/details/115539285

版权

<!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>
    <style>
        .box {
            width: 100%;
            height: 50px;
            background-color: black;
            position: relative;
        }

        span {
            position: absolute;
            right: 0;
            top: 0;
            color: wheat;

        }
    </style>
</head>

<body>
    <div class="box">
        <span>5</span>
    </div>
    <script>
        let o_div = document.querySelector('.box');
        let span = document.querySelector('span');
        let timer = null;
        // window.onload = function () {
        //     let amd = 5;
        //     timer = setInterval(() => {
        //         amd--;
        //         span.innerText = amd;
        //         if (amd == 0) {
        //             o_div.style.display = 'none';
        //             clearInterval(timer);
        //         }
        //     }, 1000)
        // }

        setInterval(() => {
            span.innerHTML -= 1;
            if (span.innerHTML == 0) {
                o_div.style.display = 'none';
            }
        }, 1000)

    </script>
</body>

</html>

风继续吹&

关注

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"> <title>Do
复制链接

扫一扫