前端（五）：实时获取当前时间并渲染到页面上

幺白幺木_

于 2024-08-05 17:04:04 发布

阅读量1.1k

点赞数 10

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_57724229/article/details/140929107

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

获取时间

函数

函数	描述
`Date()`	用于处理日期和获取时间的不同部分
`我叫${name}，你好!`	允许在字符串中嵌入变量或表达式
`padStart()`	用另一个字符串填充当前字符串，从当前字符串的左侧开始填充
`String()`、`.toString()`	将内容转换为字符串

代码示例

 const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

        console.log(formattedDate, formattedTime);

效果展示

在这里插入图片描述

更新时间

函数

函数	描述
`setInterval(() => {}, 时间)`	用于每隔指定的毫秒数重复执行一个函数

代码示例

        setInterval(() => {    
        const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

        console.log(formattedDate, formattedTime);
    }, 1000);

效果展示

在这里插入图片描述

页面渲染

函数

函数	描述
`document.write`	用于向文档流中写入字符串。它通常用于动态插入脚本或样式到HTML文档中
`document.body.innerHTM`	用于获取或设置从开始标签到结束标签的内容，包括标签本身
`document.body.innerTex)`	用于获取或设置标签内的纯文本内容

代码示例

        setInterval(() => {    
        const now = new Date();

        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        
        // document.write(`${formattedDate} ${formattedTime}`);
        document.body.innerHTML = `<span style="color: blue;">${formattedDate} ${formattedTime}</span>`;
        // document.body.innerText = `${formattedDate} ${formattedTime}`;
        // document.body.innerText = `<span style="color: red;">${formattedDate} ${formattedTime}</span>`;

        console.log(formattedDate, formattedTime);
        }, 1000);