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>
时钟的显示肯能会有点误差。