toLocaleTimeString() 方法

最新推荐文章于 2024-02-07 14:18:07 发布

何嘉烟

最新推荐文章于 2024-02-07 14:18:07 发布

阅读量1.8k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/the_more_more/article/details/125954807

版权

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>

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

何嘉烟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
toLocaleTimeString() 方法

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

扫一扫