加载中...

toLocaleTimeString() 方法


toLocaleTimeString() 方法

前言

在项目的开发可能会使用到时间,我们可以使用现成的npm包来个格式化时间,如果是简单的使用一下时间作为标记,我们就可以使用原生的js方法来对时间进行简化

使用介绍

toLocaleTimeString() 方法可以根据本地时间把 Date 对象的时间部分转换为字符串,我们需要传入一个时间戳作为参数来解析,以本地时间区表示,并根据本地规则格式化,这样就会得到一个由小时:分钟:秒的组合返回给我们,这样一来我们就可以做一个小的demo,也就是默认的屏保效果。

示例

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      background: url('https://img1.imgtp.com/2022/07/23/ldcf907e.jpg') no-repeat;
      background-size: cover;
      background-position: center;
      /* filter: blur(2px);模糊效果 */
    }

    .time {
      position: absolute;
      width: 600px;
      height: 300px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      line-height: 300px;
      font-size: 150px;
    }
  </style>
</head>

<body>
  <div class="time"></div>
  <script>
    let x = document.querySelector('.time')
    setInterval(function () {
      x.innerHTML = new Date().toLocaleTimeString();
    }, 1000)
  </script>
</body>

</html>

时钟的显示肯能会有点误差。


文章作者:
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 !