JavaScript解决生日倒计时的问题

简介: JavaScript解决生日倒计时的问题

创建一个文本框,在一个文本框中,让用户输入他的出生月份,第二个文本框中输入月份中的日期,编写一个JavaScript程序,在第三个文本框中打印距离用户生日还有多少天。

 <div id="box">
 
        <label for="">请输入您的出生月份:</label> <input type="text">
        <label for="">请输入您的出生日期:</label> <input type="text">
        <button>确定</button>
        <label for="">距离您的生日还有:</label> <input type="text">
 
    </div>
    <script>
        var btn = document.querySelector('button');
        console.log(btn);
        btn.onclick = function () {
 
            var time1 = new Date();
            var year = time1.getFullYear();
            console.log(year);
            var ins = document.querySelectorAll('input');
            console.log(ins);
            var m2 = ins[0].value;
            var d2 = ins[1].value;
            console.log(m2, d2);
            var time2 = new Date(`${year}/${m2}/${d2} 12:00:00`);
            console.log(time2);
            var time3 = time2.getTime() - time1.getTime();
            console.log(time3);
            if (time3 < 0) {
                year = year + 1;
                console.log(year);
                var time2 = new Date(`${year}/${m2}/${d2} 12:00:00`);
                var time3 = time2.getTime() - time1.getTime();
            }
            console.log(time3);
 
            var days = Math.floor(time3 / (1000 * 60 * 60 * 24));
            console.log(days);
            ins[2].value = days;
        }
    </script>
相关文章
|
3月前
|
JavaScript 索引
js倒计时功能
js倒计时功能
43 0
|
5月前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
6月前
|
JavaScript 前端开发
JavaScript编写一个倒计时
JavaScript编写一个倒计时
31 0
|
6月前
|
JavaScript
JS利用时间戳倒计时案例
JS利用时间戳倒计时案例
|
6月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)
111 1
|
6月前
|
移动开发 JavaScript 前端开发
分享75个JS特效倒计时,总有一款适合您
分享75个JS特效倒计时,总有一款适合您
92 0
|
6月前
h5+JavaScript实现一个倒计时功能
h5+JavaScript实现一个倒计时功能
|
6月前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
6月前
|
JavaScript
JS倒计时
JS倒计时