JS实现倒计时操作

最新推荐文章于 2024-06-24 19:57:36 发布

随性而作的码农

最新推荐文章于 2024-06-24 19:57:36 发布

阅读量160

点赞数

分类专栏：前端文章标签： 1024程序员节 javascript 前端

本文链接：https://blog.csdn.net/weixin_71087234/article/details/134022919

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看效果

首先用到getTime方法来获取两者的时间戳。定义一个变量nowday用来接收当前的时间，newday接收目标时间，t 传入目标时间。t1 是获取当前时间距离默认时间(1970-1-1 0:0:0)的毫秒数，t2 是目标时间距离默认时间的毫秒数。

var nowday = new Date();
var newday = new Date(t);
var t1 = nowday.getTime();
var t2 = newday.getTime();

用户传入的目标时间可能是未来时间也可能是过去时间，当 t2 - t1 为正数时，说明是未来时间，同理负数是过去时间。这里可以用到Math.abs()方法，直接转化为正数。因为time1是毫秒，除于1000得到秒。

var time1 = (t2-t1) / 1000;
var time = Math.abs(time1);
time = (t2-t1) / 1000;

接下来就是通过计算得到现在时间距离目标日期还有（过去）**天**时**分**秒。这里用到三元表达式，用于规范格式：00天00时00分00秒。

var d = parseInt(time / 60 / 60 / 24);
d = d < 10 ? "0" + d : d
var h = parseInt(time / 60 / 60 % 24);
h = h < 10 ? "0" + h : h
var m = parseInt(time / 60 % 60);
m = m < 10 ? "0" + m : m
var s = parseInt(time % 60);
s = s < 10 ? "0" + s : s

接下来就是返回值，我们还可以对未来时间和过去时间进行判断，如果是未来时间则 “还有”，过去的就是 “已过去”。



str = newday.getFullYear()+"年"+(newday.getMonth()+1)+"月"+newday.getDate()+"日"+newday.getHours()+"时"+newday.getMinutes()+"分"+newday.getSeconds()+"秒"
if(time >= 0){
    return "距离<br>"+str+"还有"+d+"天"+h+"时"+m+"分"+s+"秒"
}else{
    return "距离<br>"+str+"已过去"+d+"天"+h+"时"+m+"分"+s+"秒"
}

最后打印一下当前时间。

function new_day(){
    var d = new Date();
    return (d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日")
}

下面是全部代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border: solid 3px;
            text-align: center;
            box-shadow: 0px 0px 3px 1px yellow;
        }
    </style>
</head>
<body>
    <script>
        
        function cut(t){
            var nowday = new Date();
            var newday = new Date(t);
            var t1 = nowday.getTime();
            var t2 = newday.getTime();
            var time1 = (t2-t1) / 1000;
            var time = Math.abs(time1);
            time = (t2-t1) / 1000;
            var d = parseInt(time / 60 / 60 / 24);
            d = d < 10 ? "0" + d : d
            var h = parseInt(time / 60 / 60 % 24);
            h = h < 10 ? "0" + h : h
            var m = parseInt(time / 60 % 60);
            m = m < 10 ? "0" + m : m
            var s = parseInt(time % 60);
            s = s < 10 ? "0" + s : s
            str = newday.getFullYear()+"年"+(newday.getMonth()+1)+"月"+newday.getDate()+"日"+newday.getHours()+"时"+newday.getMinutes()+"分"+newday.getSeconds()+"秒"
            if(time >= 0){
                return "距离<br>"+str+"还有"+d+"天"+h+"时"+m+"分"+s+"秒"
            }else{
                return "距离<br>"+str+"已过去"+d+"天"+h+"时"+m+"分"+s+"秒"
            }
        }
        function new_day(){
            var d = new Date();
            return (d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日")
        }

    </script>
    <div>
        <h2>今天日期是</h2>
        <p style="color: blue;">
            <script>
                document.write(new_day())
            </script>
        </p>
        <p>
            <script>
                var input = prompt("输入目标时间：(例如:1970-1-1 0:0:0)")
                document.write(cut(input))
            </script>
        </p>
    </div>
</body>
</html>