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

获取时间

• 函数

  函数描述

  Date()
  

  用于处理日期和获取时间的不同部分

  我叫${name}，你好!
  

  允许在字符串中嵌入变量或表达式

  padStart()
  

  用另一个字符串填充当前字符串，从当前字符串的左侧开始填充

  String()
  

  、

  .toString()
  

  将内容转换为字符串

• 代码示例

const now =newDate();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 =newDate();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 =newDate();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);

• 效果展示