js实现简单的倒计时功能

本文介绍: 使用Da t e 内置对象实现一个简单的倒计时，用户输入目标年月日，点击开始可以看到剩余时间。新手练习，欢迎大家讨论并指出错误。注意不可以输入当前时间之前的时间。

使用Da te内置对象实现一个简单的倒计时，用户输入目标年月日，点击开始可以看到剩余时间。新手练习，欢迎大家讨论并指出错误。注意不可以输入当前时间之前的时间
 效果如图
在这里插入图片描述

&lt;!-- 倒计时 --&gt;
    <div class="daojishi"&gt;
        <h2&gt;倒计时</h2&gt;
        <div class="shuru"&gt;
            请输入:
            <input type="text"&gt;年
            <input type="text">月
            <input type="text">日
        </div>
        <div class="begin">开始</div>
        <div class="shengyu">现在距离-<em>0000</em>-还剩:</div>
        <div class="juti">
            <b class="on">00</b>天
            <b class="on">00</b>小时
            <b class="on">00</b>分钟
            <b class="on">00</b>秒
        </div>
    </div>

css 代码如下

.daojishi {
            width: 700px;
            height: 420px;
            background-color: #9e9e9e;
            margin: auto;
        }

        h2 {
            margin: auto;
            text-align: center;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .shuru {
            margin: auto;
            text-align: center;
            font-size: 16px;
        }

        .begin {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background-color: #1e1e1e;
            color: white;
            margin: auto;
            font-size: 24px;
            cursor: pointer;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .shengyu {
            text-align: center;
            font-size: 22px;
        }

        .juti {
            text-align: center;
            font-size: 22px;
            margin-top: 20px;
        }

        .on {
            color: rgba(255, 0, 0, 0.748);
        }

js 代码如下

// 倒计时
        // 获取
        var input = document.getElementsByTagName('input');
        var begin = document.getElementsByClassName('begin')[0];
        var em = document.getElementsByTagName('em')[0];
        var on = document.getElementsByClassName('on');

        // begin点击事件
        begin.onclick = function () {
             //定时器，一秒变一下
           setInterval(function(){
             // 获取取到的年月日 补0
             var year = input[0].value;
            year = year < 10 ? '0' + year : year;
            var month = input[1].value;
            month = month < 10 ? '0' + month : month;
            var date = input[2].value;
            date = date < 10 ? '0' + date : date;
            // 输入的日期赋给em
            em.innerText = year + '年' + month + '月' + date + '日';
            console.log(em);
            // 创建data1对象，输入的时间转换为时间戳
            var date1 = new Date(year + '-' + month + '-' + date);
            console.log(date1);
            var date1c = +new Date(date1);
            console.log(date1c);
            // 获取当前时间戳
            var date2c = +new Date();
            console.log(date2c);
            // 时间戳相减 注意要除以1000转为秒
            var datecc = (date1c - date2c) / 1000;
            // 得到的结果转换为天时分秒，注意补0
            var d = parseInt(datecc / 60 / 60 / 24);
            var h = parseInt(datecc / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(datecc / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(datecc % 60);
            s = s < 10 ? '0' + s : s;
            // 赋给结果
            on[0].innerText = d;
            on[1].innerText = h;
            on[2].innerText = m;
            on[3].innerText = s;
           },1000)
        }