JavaScript解决生日倒计时的问题

最新推荐文章于 2024-03-21 12:32:04 发布

shan33__

最新推荐文章于 2024-03-21 12:32:04 发布

阅读量498

点赞数 10

分类专栏：经典例题文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/shan33__/article/details/136410016

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文介绍了一个HTML表单，用户输入出生月份和日期后，通过JavaScript动态计算距离用户生日还有多少天，并显示在第三个文本框中。展示了基本的日期处理和DOM操作。

摘要由CSDN通过智能技术生成

创建一个文本框，在一个文本框中，让用户输入他的出生月份，第二个文本框中输入月份中的日期，编写一个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>