前端（五）：实时获取当前时间并渲染到页面上
幺白幺木_ 2024-08-08 12:33:01 阅读 54
获取时间
函数
| 函数 | 描述 |
|---|---|
| <code>Date() | 用于处理日期和获取时间的不同部分 |
| <code>我叫${name}，你好! | 允许在字符串中嵌入变量或表达式 |
| <code>padStart() | 用另一个字符串填充当前字符串，从当前字符串的左侧开始填充 |
<code>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);
效果展示
更新时间
函数
| 函数 | 描述 |
|---|---|
| <code>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);
效果展示
页面渲染
函数
| 函数 | 描述 |
|---|---|
| <code>document.write | 用于向文档流中写入字符串。它通常用于动态插入脚本或样式到HTML文档中 |
| <code>document.body.innerHTM | 用于获取或设置从开始标签到结束标签的内容，包括标签本身 |
| <code>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>`;code>
// document.body.innerText = `${formattedDate} ${formattedTime}`;
// document.body.innerText = `<span style="color: red;">${formattedDate} ${formattedTime}</span>`;code>
console.log(formattedDate, formattedTime);
}, 1000);
效果展示
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。