js倒计时

倒计时

 * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: #eeeeee;
            margin: 50px auto;
            text-align: center;
            overflow: hidden;
        }

        h1 {
            font-size: 30px;
            color: black;
            margin: 20px 0 30px;
        }

        .inputBox input {
            width: 70px;
            height: 20px;
            line-height: 20px;

        }

        .btn {
            width: 100px;
            height: 100px;
            background-color: red;
            color: black;
            border-radius: 50%;
            margin: 25px auto;
            font-size: 40px;
            line-height: 100px;
            cursor: pointer;
        }

        .targetDate {
            margin-bottom: 30px;
        }

        .targetDate span {
            font-size: 22px;
            color: #999999;
        }

        .reverseTime {
            font-size: 30px;
            color: #999999;
            display: none;
        }

<div class="box">
        <h1>倒计时</h1>
        <div class="inputBox">
            请输入&nbsp;:&nbsp;
            <input type="text">年&nbsp;
            <input type="text">月&nbsp;
            <input type="text">日
        </div>
        <div class="btn">开始</div>
        <p class="targetDate">现在距离-<span></span>-还剩:</p>
        <p class="reverseTime"></p>
    </div>

var year = document.getElementsByTagName('input')[0];
    var month = document.getElementsByTagName('input')[1];
    var day = document.getElementsByTagName('input')[2];
    var btn = document.getElementsByClassName('btn')[0];
    var span = document.getElementsByClassName('targetDate')[0].getElementsByTagName('span')[0];
    var p = document.getElementsByClassName('reverseTime')[0];
    var timer;
    btn.onclick = function () {
        var y = year.value;
        var m = month.value - 1;
        var d = day.value;
        console.log(isNaN(y))
        console.log(isNaN(d))
        console.log(isNaN(m))

        if(isNaN(y) || isNaN(d) || isNaN(m)){
            alert('请输入数字');
            return;
        }
        
        
        
        p.style.display = 'block';
        span.innerHTML = y + '年' + (m + 1) + '月' + d + '日';
        clock();
        clearInterval(timer)
        timer = setInterval(clock, 1000);
        function clock() {
        	//new Date(y, m, d); m的值最大是11
            var targetTime = new Date(y, m, d);
            var nowTime = new Date();
            var time = (targetTime - nowTime) / 1000;
            var t = parseInt(time / 86400);
            var hr = parseInt(time % 86400 / 3600);
            var min = parseInt(time % 3600 / 60);
            var sec = parseInt(time % 60);
            var str = t + '天' + hr + '小时' + min + '分' + sec + '秒';
            p.innerHTML = str;
        }
        //typeof parseInt(d) == Number? num : alert('请输入数字');
        //num = y,m,d == Number? num : alert('请输入数字');
    }

效果图