js实现倒计时特效（背景颜色随时间改变）

东方青云、

已于 2023-04-21 15:28:22 修改

阅读量912

点赞数 5

分类专栏：综合案例 JS笔记文章标签： javascript css 前端

于 2023-04-18 10:26:39 首次发布

本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/130215910

版权

JS笔记同时被 2 个专栏收录

20 篇文章 5 订阅

订阅专栏

综合案例

14 篇文章 7 订阅

订阅专栏

1、实现效果

在这里插入图片描述

2、实现代码

<!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>
        em,
        i {
            font-style: normal;
        }

        .center {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .recomment_today {
            position: relative;
            float: left;
            width: 251px;
            height: 170px;
            line-height: 165px;
            background-color: #0a9e87;
            text-align: center;
            cursor: pointer;
            transition: all .3s linear;
        }

        .recomment_today i {
            position: absolute;
            top: -35px;
            left: 50px;
            font-size: 30px;
            color: #fff;
            font-weight: 700;
        }

        .recomment_today .ems {
            position: absolute;
            top: 12px;
            left: 36px;
        }

        .recomment_today span {
            margin-top: 118px;
            display: inline-block;
            width: 35px;
            height: 35px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 35px;
        }

        .recomment_today:hover {
            box-shadow: 0 10px 10px #ccc;

        }
        .recomment_today em {
            font-size: 20px;
            margin-left: 2px;
            color: #fff;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="center">
        <div class="recomment_today">
            <i>小兔鲜秒杀</i>
            <em class="ems">22:00点场 距结束</em>
            <span class="hour">12</span><em>:</em>
            <span class="minute">20</span><em>:</em>
            <span class="second">03</span>
        </div>
    </div>
    <script>
        // 倒计时特效
        (function () {
            // 封装一个随机颜色函数
            function getRandomColor(flag = true) {
                if (flag) {
                    let str = '#'
                    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                    for (let i = 1; i <= 6; i++) {
                        // 获得一个随机数字作为数组的下标
                        let random = Math.floor(Math.random() * arr.length)
                        str += arr[random]
                    }
                    return str
                } else {
                    // 返回rgb随机颜色
                    let r = Math.floor(Math.random() * 256)
                    let g = Math.floor(Math.random() * 256)
                    let b = Math.floor(Math.random() * 256)
                    return `rgb(${r},${g},${b})`
                }
            }
            function countDown() {
                // 获取当前时间戳
                let now = +new Date()
                // 获取未来时间戳
                let last = +new Date('2024-3-28 22:00:00')
                // 倒计时时间秒
                let time = (last - now) / 1000
                // 得到小时
                let h = parseInt(time / 60 / 60 % 24)
                // 不满10补零操作
                h = h > 10 ? h : '0' + h
                // 得到分
                let m = parseInt(time / 60 % 60)
                // 不满10补零操作
                m = m > 10 ? m : '0' + m
                // 得到秒
                let s = parseInt(time % 60)
                // 不满10补零操作
                s = s > 10 ? s : '0' + s
                // 赋值给时分秒元素
                document.querySelector('.hour').innerHTML = h
                document.querySelector('.minute').innerHTML = m
                document.querySelector('.second').innerHTML = s
                // 给盒子设置随机背景颜色
                document.querySelector('.recomment_today').style.backgroundColor = getRandomColor()
            }
            countDown()
            setInterval(countDown, 1000)
        })()
    </script>
</body>

</html>