js实现时间倒计时

最新推荐文章于 2022-07-21 18:20:02 发布

代码编编◐

最新推荐文章于 2022-07-21 18:20:02 发布

阅读量585

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/wqy18378671261/article/details/118075033

版权

这段代码展示了如何使用JavaScript实现实时显示当前时间和倒计时功能。它首先获取当前日期和时间，并在页面上显示，然后设置一个倒计时，计算到2021年10月1日的剩余天数、小时、分钟和秒数，动态更新显示。

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

代码如下：

<div id="time"></div>
    <div id="box"></div>

    <script src="../JS/jquery-3.3.1.min.js"></script>
    <script>
        // 当前时间
        setInterval(function(){
            // 声明时间
            var time=new Date();
            // 获取年月日，时分秒
            var year=time.getFullYear();
            var month=time.getMonth()+1;
            var day=time.getDate();
            var hour=time.getHours();
            var minute=time.getMinutes();
            var second=time.getSeconds();
            var box=document.getElementById("time");
            // 进行赋值
            box.innerHTML="当前时间："+year+"年"+count(month)+"月"+count(day)+"日"+"  "+count(hour)+":"+count(minute)+":"+count(second);
            
            // 判断
            function count(obj){
                if(obj<9){
                    return "0"+obj;
                }
                return obj;
            }
        }, 500);

        // 倒数时间
        setInterval(function(){
            // 1、获取某个时间点的秒数   2021年1月1日的时间点；9对应的是10月份
            var wddate=(new Date(2021,9,1)).getTime(); // getTime()方法获取到的是“毫秒”

            // 2、获取当前时间点的秒数
            var ndate=(new Date()).getTime(); // 毫秒

            // 3、获取两个时间的【时间差值】  天数判断
            var diff=(wddate-ndate)/1000; // 秒   1秒=1000毫秒

            // 4、当前的秒数能够“多少天”   天数判断
            var days = parseInt(diff/(24*60*60));

            // 5、求【余数的小时】  当前的小时数可以平摊开多少天后的【余的小时】
            var hours = parseInt(diff/(60*60)%24);

            // 6、求【余数的分数】
            var minutes=parseInt(diff/(60)%60);

            // 7、求【余数的秒数】
            var seconds=parseInt(diff%60);

            var time="距离2021年10月1日，还有："+days+"天"+hours+"小时"+minutes+"分钟"+seconds+"秒";
            $("#box").text(time);
        }, 500);