博客

封装时间函数

代码如下

        function getTime() {
            var t = new Date();
            var y = t.getFullYear();
            var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);
            var d = t.getDate() > 10 ? t.getDate() : '0' + t.getDate();
            var h = t.getHours() > 10 ? t.getHours() : '0' + t.getHours();
            var mt = t.getMinutes() > 10 ? t.getMinutes() : '0' + t.getMinutes();
            var s = t.getSeconds() > 10 ? t.getSeconds() : '0' + t.getSeconds();
            return y + '-' + m + '-' + d + ' ' + h + ':' + mt + ':' + s;
        }
        console.log(getTime());

**注意：**在上方函数中，月份需要+1，并且为了美观，通过三元表达式来给小于‘10’的月份、日期、时间加‘0’。

var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);

实现倒计时

方法一

1.使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间，endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。

2.把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数（剩余毫秒数），除以 1000 得到剩余秒数，再除以 60 得到剩余分钟数，再除以 60 得到剩余小时数。除以 24 得到剩余天数。剩余秒数 lefttime/1000 模 60 得到秒数，剩余分钟数 lefttime/(1000 * 60) 模 60 得到分钟数，剩余小时数 lefttime/(1000 * 60 * 60) 模 24 得到小时数。

代码如下：

var showtime = function () {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2023/6/18");  //定义结束时间
    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        d= Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        h = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        m= Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        s= Math.floor(lefttime/1000%60);  //计算秒数
    return d+ "天" + h+ ":" + m+ ":" + s;  //返回倒计时的字符串
}

方法二

1.同方法一

2.定义day,hour,min,sen用来定义倒计时的天、时、分、秒，然后parseInt用来将得到的值转化为整数形式，再用得到的秒/60得到多少分再/60得到多少时再/24得到多少天。最后，

hour/60/60%24

：用所得的时间把大数除以24取余得到还要多少小时，分，秒同理。

代码如下：

function getCountdown(time) {
    var newTime = +new Date();
    var futureTime = +new Date(time);
    var time = (futureTime - newTime) / 1000 //把毫秒数变成秒数
    var d = parseInt(time / 3600 / 24)// 天数
    var h = parseInt(time / 3600 % 24)// 小时
    var m = parseInt(time / 60 % 60)// 分钟
    var s = parseInt(time % 60)//秒
    return d + '天' + h + '时' + m + '分' + s + '秒'
}

最后附上两种倒计时完整代码，一种为页面打印，一种为弹窗显示。

实时在页面展示

代码如下：

    <p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    <script>
        function showTime() {
            var spans = document.querySelectorAll('span');
            var endTime = new Date('2023-06-18 00:00:00').getTime();
            var newTime = new Date().getTime();
            var diffTime = (endTime - newTime) / 1000;
            var day = parseInt(diffTime / 60 / 60 / 24);
            var honur = parseInt(diffTime / 60 / 60 % 24);
            var min = parseInt(diffTime / 60 % 60);
            var sen = parseInt(diffTime % 60);
            spans[0].innerText = day;
            spans[1].innerText = honur;
            spans[2].innerText = min;
            spans[3].innerText = sen;
        }
        setInterval(showTime, 1000)

    </script>

用户弹框输入自行倒计时

代码如下：

    <script>
        function getCountdown(time) {
            var newTime = +new Date();
            var futureTime = +new Date(time);
            var time = (futureTime - newTime) / 1000 //把毫秒数变成秒数
            var d = parseInt(time / 3600 / 24)// 天数
            var h = parseInt(time / 3600 % 24)// 小时
            var m = parseInt(time / 60 % 60)// 分钟
            var s = parseInt(time % 60)//秒
            return d + '天' + h + '时' + m + '分' + s + '秒'
        }
        var year = prompt('年份');
        var months = prompt('月份');
        var days = prompt('日');
        var hours = prompt('时');
        var minutes = prompt('分');
        var seconds = prompt('秒');
        var futureTime = year + '-' + months + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;
        alert(getCountdown(futureTime));
    </script>

拓展：实时更新的倒计时