JavaScript+html实现倒计时

铃儿响叮当不响

已于 2022-07-14 09:53:48 修改

阅读量4.1k

点赞数 2

分类专栏：前端js笔记文章标签： javascript html

于 2022-07-13 20:13:45 首次发布

本文链接：https://blog.csdn.net/qq_36507046/article/details/125759711

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

在实现页面倒计时之前，我们先学习一下相关知识

实例化时间对象

语法： let date = new Date() 当前时间

let date = new Date('2021-6-13 9:45:00') 指定时间

获取时间对象

语法：date.getFullYear() 获得年份

date.getMonth() + 1 获得月份，月份的取值范围为0-11，实际月份需要+1

date.getDate() 获得月份中的每一天

date.getHours() 获得时

date.getMinutes() 获得分

date.getSeconds() 获得秒

date.getDay() 获取星期几，取值范围为0-6，星期天为0

时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。时间戳是总的毫秒数，每个时间点的时间戳都是独一无二的，因此时间戳可以用来计算倒计时，利用将来的时间戳减去现在的时间戳，即可得到剩余时间的毫秒数，将其转换为时分秒就是剩余的时间。

获取时间戳的三种方式

1、使用getTime()方法

实例化：let date = new Date()

获取时间戳：console.log(date.getTime())

2、+new Date() （常用）

获取时间戳：console.log(+new Date()) //利用了隐式转换

        let date = new Date()
         // 得到当前时间的时间戳  
        console.log(+new Date())
        // 得到指定时间的时间戳
        console.log(+new Date('2022-7-13 18:00:00'))

3、Date.now()

console.log(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>Document</title>
    <style>
        div {
            width: 400px;
            height: 50px;
            background-color: powderblue;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="time"></div>
    <script>
        let data = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
        let time = document.querySelector('.time')
        getTime()
        setInterval(getTime,1000)
        function getTime() {
        // 实例化时间对象一定要写到定时器里边
        let date = new Date()
        let year =  date.getFullYear()
        let month = date.getMonth()+1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        let weekday = date.getDay()
        let time = document.querySelector('.time')
        time.innerHTML = `今天是：${year}年${month}月${day}日 ${hour}时${minute}分${second}秒 ${data[weekday]}`
        }
    </script>
</body>
</html>

案例二：倒计时（设置指定时间能自动计算倒计时时间）

在间歇函数调用前，需要先获取当前时间，才会避免页面更新延迟。这里主要用到了两个间歇函数来实时更新时间。注意：时间戳获取的时毫秒数，需要将其/1000转换为秒数。

<!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>Document</title>
    <style>
        .countdown {
            width: 300px;
            height: 350px;
            text-align: center;
            line-height: 1;
            color:#fff;
            background-color:teal;
            overflow: hidden;
        }

        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px 0;
        }

        .countdown .title {
            font-size: 40px;
        }

        .countdown .tips {
            margin-top: 100px;
            font-size: 16px;
        }
        
        .countdown .small{ 
           font-size: 17px;
        }

        .countdown .clock {
          width: 250px;
          margin: 60px 0 0 38px;
          overflow: hidden;
        }

        .countdown .clock span,
        .countdown .clock i {
            display:block;
            text-align: center;
            line-height: 34px;
            font-size: 16px;
            float:left;
        }

        .countdown .clock span{
            width:35px;
            height:35px;
            border-radius: 5px;
            background-color: #303430;
        }
 
        .countdown .clock i {
            width: 25px;
            font-style: normal;
        }
    </style>
</head>
<body>
       <div class="countdown">
        <p class="next">今天是2022年7月13日</p>
        <p class="title">毕业倒计时</p>
        <p class="clock">
            <span id="days"></span>
            <i>天</i>
            <span id="hours"></span>
            <i>:</i>
            <span id="minutes"></span>
            <i>:</i>
            <span id="seconds"></span>
            <i>秒</i>
        </p>
         <p class="tips">
            现在时间是15:34:30
         </p>
       </div>

       <script>
        let date = new Date()
        let year =  date.getFullYear()
        let month = date.getMonth()+1
        let day = date.getDate()
        let clock = document.querySelector('.clock')
        let next = document.querySelector('.next')
        let tips = document.querySelector('.tips')
        let days = document.querySelector('#days')
        let hours = document.querySelector('#hours')
        let minutes = document.querySelector('#minutes')
        let seconds = document.querySelector('#seconds')
        next.innerHTML = `今天是${year}年${month}月${day}日`

        getTime()
        setInterval(getTime,1000)
        function getTime(){
        let date = new Date()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        hour = hour < 10 ? '0' + hour : hour
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        tips.innerHTML = `现在时间是${hour}时${minute}分${second}秒`
        }
        
        countTime()
        function countTime(){
        let now = +new Date()
        //2、得到指定时间的时间戳 
        let last = +new Date('2023-5-30 8:00:00')
        // 3、计算剩余的毫秒数/1000 == 剩余的秒数
        let count = (last-now) / 1000
        // 4、转换为天时分秒
        d = parseInt(count/60/60/24)
        d = d < 10 ? '0' + d : d
        days.innerHTML = d
        h= parseInt(count/60/60%24)
        h = h < 10 ? '0' + h : h
        hours.innerHTML = h
        m = parseInt(count/60%60)
        m = m < 10 ? '0' + m : m
        minutes.innerHTML = m
        s = parseInt(count%60)
        s = s < 10 ? '0' + s : s
        seconds.innerHTML = s
            if(count <= 0){
             clock.innerHTML = '恭喜你毕业啦！！！'
          }
        }
        setInterval(countTime,1000)
       </script>
</body>
</html>

铃儿响叮当不响

关注

2
点赞
踩
54

收藏

觉得还不错? 一键收藏
2
评论
JavaScript+html实现倒计时

实例化时间对象语法： let date = new Date() 当前时间 let date = new Date('2021-6-13 9:45:00') 指定时间获取时间对象语法：date.getFullYear() 获得年份date.getMonth() + 1 获得月份，月份的取值范围为0-11，实际月份需要+1date.getDate() 获得月份中的每一天date.getHours() 获得时date.getMinutes() 获得分date.getSeconds() 获得秒。.
复制链接

扫一扫