js基础之倒计时代码

程序媛_MISS_zhang_0110

已于 2024-01-05 10:12:38 修改

阅读量596

点赞数

分类专栏： js基础文章标签： javascript html css

于 2021-06-18 15:30:57 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/118027408

版权

js基础专栏收录该内容

58 篇文章 2 订阅

订阅专栏

js基础之倒计时代码

主要代码

主要代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>您的专属倒计时</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-family: '微软雅黑';
                font-size: 20px;
            }

            .time {
                overflow: hidden;
                margin: 100px auto;
                border: 1px solid #fff;
                text-align: center;
                background: linear-gradient(#fff1eb, #ace0f9);
                border-radius: 10px;
                padding: 20px;
                width: 530px;
            }

            .time h3 {
                font-size: 30px;
                text-align: center;
                padding-bottom: 30px;
                letter-spacing: 5px;
                /* background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */
                background-image: linear-gradient(
                    to right,
                    #eea2a2 0%,
                    #bbc1bf 19%,
                    #57c6e1 42%,
                    #b49fda 79%,
                    #7ac5d8 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .time h3 input {
                border: none;
                width: 100px;
                height: 35px;
                text-align: center;
                border-radius: 8px;
                background: #f2f2f2;
            }

            .time .even,
            .time .odd {
                float: left;
                height: 50px;
                text-align: center;
                line-height: 50px;
                margin-right: 10px;
                border-radius: 8px;
            }

            .time .even {
                width: 35px;
                padding: 0 20px;
                background: #fff;
                color: rgb(60, 224, 216);
            }

            .time .odd {
                width: 20px;
                padding: 0 10px;
                /* background: #ffffff; */
                color: #fff;
            }

            #lastDiv {
                margin-right: 0;
            }
        </style>
    </head>
    <body>
        <div class="time">
            <h3>小姐姐，距离您下班还有:</h3>
            <div id="residueDays" class="even"></div>
            <div class="odd">天</div>
            <div id="residueHours" class="even"></div>
            <div class="odd">时</div>
            <div id="residueMinutes" class="even"></div>
            <div class="odd">分</div>
            <div id="residueSeconds" class="even"></div>
            <div class="odd" id="lastDiv">秒</div>
        </div>
    </body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    var flag = true
    var newDateObj = new Date()
    var Year = newDateObj.getFullYear()
    var Mounth = newDateObj.getMonth() + 1
    Mounth = Mounth < 10 ? '0' + Mounth : Mounth
    var Data = newDateObj.getDate()
    Data = Data < 10 ? '0' + Data : Data
    console.log(Year, Mounth, Data)

    function countDownTime() {
        // 倒计时截止时间
        var EndTime = new Date(`${Year}/${Mounth}/${Data}` + ' 18:00:00')
        // 现在的事件
        var NowTime = new Date()
        // 时间差（时间单位：ms）
        var t = EndTime.getTime() - NowTime.getTime()
        var d = 0
        var h = 0
        var m = 0
        var s = 0
        if (t >= 0) {
            // 向下取整
            d = Math.floor(t / 1000 / 60 / 60 / 24)
            h = Math.floor((t / 1000 / 60 / 60) % 24)
            m = Math.floor((t / 1000 / 60) % 60)
            s = Math.floor((t / 1000) % 60)
        }
        // 如果是一位数，前面拼接"0"
        function toDouble(num) {
            return num < 10 ? '0' + num : num
        }
        $('#residueDays').html(d)
        $('#residueHours').html(toDouble(h))
        $('#residueMinutes').html(toDouble(m))
        $('#residueSeconds').html(toDouble(s))
        console.log(d, h, m, s)
        var time = document.querySelector('.time')

        if (d == 0 && h == 0 && m == 0 && s == 0) {
            var p = document.createElement('p')
            if (flag) {
                flag = false
                p.innerHTML = '下班了，收拾东西麻溜点儿走吧'
                p.style.backgroundImage =
                    'linear-gradient(to right,#eea2a2 0%, #bbc1bf 19%,#57c6e1 42%,#b49fda 79%, #7ac5d8 100%)'
                p.style.webkitBackgroundClip = ' text'
                p.style.webkitTextFillColor = ' transparent'
                p.style.marginTop = '70px'
                p.style.fontSize = '25px'
                time.appendChild(p)
            } else {
                return
            }
        }
    }
    setInterval(countDownTime, 1000)
</script>