JavaScript动态显示当前时间

狂扇哑巴好嘴

已于 2022-10-11 11:47:04 修改

阅读量3.8k

点赞数 6

文章标签： javascript 前端开发语言

于 2022-08-07 06:22:59 首次发布

本文链接：https://blog.csdn.net/m0_64750932/article/details/126205333

版权

前端写项目时, 有时会需要获取当前时间, 虽然使用度不高, 难免有需要的时候.

下面整理获取当前时间代码思路

使用 new Date() 获取 当前时间的时间戳

getFullYear(): 时间戳转换的年份
getMonth() + 1: 月份
getDate(): 日期
getHours()
getMinutes()
getSeconds()

根据需要获取相应的时间类型

var showTime = document.querySelector('.showTime');
const date = new Date();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
// const year = date.getFullYear();
// const month = date.getMonth() + 1;
// const day = date.getDate();
// showTime.innerHTML = (`${year} : ${month} : ${day}`);
// showTime.innerHTML = (`${date.toLocaleString()}`);   //"1995/12/17 上午3:24:00"
showTime.innerHTML = `${date.toDateString()}--${hour} : ${minutes} : ${seconds}`  // "Sun Dec 17 1995"

其中含有方法快速获取固定类型的年月日时间类型

toLocaleString(): "1995/12/17 上午3:24:00"
toDateString(): "Sun Dec 17 1995"

获取DOM元素, 在元素中使用拼接, 通过innerHTML/innerText 写入元素, 显示在页面上

动态显示时间

使用setTimeout()定时器, 否则只是显示渲染页面的当前时间

var t = null;
//添加定时器, 开始运行
t = setTimeout(time, 1000);
function time() {

    //清除定时器
    clearTimeout(t);

    //获取时间, 定义要显示的类型
    ...

    //设定定时器, 循环运行
    t = setTimeout(time, 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>当前时间</title>
    <style>
        *{margin: 0;padding: 0;background-color: #000;}
        .container{
            width: 100vw;
            height: calc(100vh);
        }
        .showTime{
            color: aqua;
            font-size: 100px;
            width: 100%;
            margin: auto;
            text-align: center;
            line-height: calc(100vh);

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="showTime"></div>
    </div>

    <script>
        var t = null;
        t = setTimeout(time, 1000);
        function time() {
            clearTimeout(t);
            var showTime = document.querySelector('.showTime');
            const date = new Date();
            const hour = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
             showTime.innerHTML = `${date.toDateString()}--${hour} : ${minutes} : ${seconds}`
            t = setTimeout(time, 1000);
        }          
    </script>


</body>
</html>

实现页面显示也可以通过document.write()直接写入在标签内部