API-日期对象（附倒计时案例）

柴九哥-

已于 2022-03-28 22:40:21 修改

阅读量252

点赞数

分类专栏： webApi 文章标签： javascript

于 2022-03-28 20:59:36 首次发布

本文链接：https://blog.csdn.net/m0_66333916/article/details/123805598

版权

webApi 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

时间转换的公式：

d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

获取时间对象：

getFullYear() 获得年份获取四位年份
getMonth() 获得月份取值为 0 ~ 11
getDate() 获取月份中的每一天不同月份取值也不相同
getHours() 小时
getMinutes() 分钟
getSeconds() 秒钟

获取时间戳的三种方法：
   1. 使用 getTime() 方法
   2 +new Date（）
       +new Date('2022-03-28 12:30:00')
   3 Date.now()
       但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下班倒计时</title>
    <style>
        .countdown {
            width: 240px;
            height: 305px;
            text-align: center;
            line-height: 1;
            color: #fff;
            background-color: brown;
            /* background-size: 240px; */
            /* float: left; */
            overflow: hidden;
        }
        
        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px;
        }
        
        .countdown .title {
            font-size: 33px;
        }
        
        .countdown .tips {
            margin-top: 80px;
            font-size: 23px;
        }
        
        .countdown small {
            font-size: 17px;
        }
        
        .countdown .clock {
            width: 142px;
            margin: 18px auto 0;
            overflow: hidden;
        }
        
        .countdown .clock span,
        .countdown .clock i {
            display: block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            float: left;
        }
        
        .countdown .clock span {
            width: 34px;
            height: 34px;
            border-radius: 2px;
            background-color: #303430;
        }
        
        .countdown .clock i {
            width: 20px;
            font-style: normal;
        }
    </style>
</head>

<body>
    <div class="countdown">
        <p class="next"></p>
        <p class="title">下班倒计时</p>
        <p class="clock">
            <span id="hour">00</span>
            <i>:</i>
            <span id="minutes">00</span>
            <i>:</i>
            <span id="second">00</span>
        </p>
        <p class="tips">

        </p>
    </div>

    <script>
        //2.4因为刷新会有延时效果，所以要封装成函数，先执行一次函数即可解决
        function showTime() {
            //当前时间转化
            let date = new Date()
            let yearNow = date.getFullYear(),
                monthNow = date.getMonth() + 1,
                dayNow = date.getDate(),
                hourNow = date.getHours(),
                minNow = date.getMinutes(),
                secNow = date.getSeconds()
                //1.1获取指定的时间戳和现在的时间戳，两者相减得出剩下为倒计时，再把剩下的转化多少个小时分钟秒钟的
            let happyTime = parseInt((+new Date('2022-03-29 12:30:00') - Date.now()) / 1000)
                //1.2把秒转化为小时、分钟、秒钟
            let hour = parseInt(happyTime / 3600)
            let minute = parseInt((happyTime / 60) % 60)
            let seconds = parseInt(happyTime % 60)
            hour = hour < 10 ? '0' + hour : hour //小时补零
            minute = minute < 10 ? '0' + minute : minute //分钟补零
            seconds = seconds < 10 ? '0' + seconds : seconds //秒钟补零
                //获取页面的时间元素
            let hourEle = document.querySelector('#hour')
            let minuteEle = document.querySelector('#minutes')
            let secondsEle = document.querySelector('#second')
            let days = document.querySelector('.next')
            let tipsTime = document.querySelector('.tips')
                //2.2绑定事件函数
            hourEle.innerHTML = hour
            minuteEle.innerHTML = minute
            secondsEle.innerHTML = seconds
            days.innerHTML = `今天是${yearNow}年${monthNow}月${dayNow}日`
            tipsTime.innerHTML = `现在是${hourNow}点${minNow}分`
                //判断倒计时完成后要停止
        }
        showTime()
        setInterval(showTime, 1000)
    </script>
</body>

</html>

个人学习记录，欢迎交流和指证！

柴九哥-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
API-日期对象（附倒计时案例）

时间转换的公式：d = parseInt(总秒数/ 60/60 /24); // 计算天数h = parseInt(总秒数/ 60/60 %24) // 计算小时m = parseInt(总秒数 /60 %60 ); // 计算分数s = parseInt(总秒数%60); // 计算当前秒数获取时间对象：getFullYear() 获得年份获取四位年份getMonth() 获得月份取值为 0 ~ 11...
复制链接

扫一扫

专栏目录