原生js实现自定义倒计时效果------Sestid

冷不防 2023-10-09 01:28 65阅读 0赞

## 倒计时的实现，主要使用了时间对象，定时器，计算时间戳 ##

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

**全部代码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #box {
                width: 500px;
                height: 500px;
                background: #eee;
                text-align: center;
            }
    
            #box h1 {
                text-align: center;
                color: #fff;
                padding-top: 20px;
            }
    
            #box input {
                width: 100px;
            }
    
            #box div {
                line-height: 200px;
                width: 200px;
                text-align: center;
                border-radius: 50%;
                background: #000;
                color: yellow;
                font-size: 50px;
                margin: 30px auto;
    
            }
    
            #box .now {
                color: #000;
            }
    
            #box .time {
                color: #fff;
                font-size: 30px;
            }
    
            #box .now span {
                color: yellow;
                font-size: 25px;
            }
    
            #box .time span {
                color: yellow;
                font-size: 40px;
            }
        </style>
      
    </head>
    
    <body>
        <div id="box">
            <h1>倒计时</h1>
            请输入：
            <input type="text">年
            <input type="text">月
            <input type="text">日
            <div class="action">开始</div>
            <p class="now">现在距离-
                <span>xxxx年xx月xx日</span>-还剩</p>
            <p class="time">
                <span>0</span>天
                <span>0</span>小时
                <span>0</span>分
                <span>0</span>秒
            </p>
        </div>
    </body>
      <script>
            window.onload = function () {
                //获取元素
                var txt = document.getElementsByTagName('input');
                var act = document.querySelector('.action');
                var span = document.getElementsByTagName('span');
                //初始化输入框内的值
                txt[0].value = '';
                txt[1].value = '';
                txt[2].value = '';
                //封装计时函数
                function auto(year, month, day) {
                    var date = new Date();
                    var date1 = new Date(year, month - 1, day, 0, 0, 0)
                    //计算时间戳
                    var sum = (date1 - date) / 1000;
                    //计算天数，小时，分钟，秒
                    var t = parseInt(sum / 86400);
                    var h = parseInt(sum % 86400 / 3600);
                    var m = parseInt(sum % 3600 / 60);
                    var s = parseInt(sum % 60);
                    //计算的值渲染到页面
                    span[0].innerHTML = year + '年' + month + '月' + day + '日';
                    span[1].innerHTML = toTwo(t);
                    span[2].innerHTML = toTwo(h);
                    span[3].innerHTML = toTwo(m);
                    span[4].innerHTML = toTwo(s);
                    if (t == 0 && h == 0 && m == 0 && s == 0) {
                        clearInterval(timer)
                    }
                    return sum;
                }
                //个位数补零
                function toTwo(time) {
                    if (time < 10) {
                        return time = '0' + time;
                    } else {
                        return time;
                    }
                }
                
                var timer = null;
                // 点击事件
                act.onclick = function () {
                    var year = txt[0].value;
                    var month = txt[1].value;
                    var day = txt[2].value;
                    //调用计时函数
                    var sum = auto(year, month, day)
                    // 判断输入的时间是否正确
                    if (sum >= 0 && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
                        console.log(year, month, day)
                        auto(year, month, day);
                        clearInterval(timer)
                        timer = setInterval(function () {
                            auto(year, month, day);
                        }, 1000);
                    } else {
                        alert('请输入正确日期')
                        txt[0].value = '';
                        txt[1].value = '';
                        txt[2].value = '';
                        span[0].innerHTML = 'xxxx年xx月xx日';
                        span[1].innerHTML = '0';
                        span[2].innerHTML = '0';
                        span[3].innerHTML = '0';
                        span[4].innerHTML = '0';
    
                    }
    
                }
            }
    
        </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925115021350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA==,size_16,color_FFFFFF,t_70