简介
实时获取当前时间并展示在页面上,是很多地方常用的;在页面中做此展示以便查看时间。本文使用js通过一个小的demo实现效果。
完整Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时展示当前时间</title>
</head>
<style>
#time {
width: 60%;
padding: 10px;
border-radius: 6px;
background-color: lightcoral;
color: white;
}
#time1 {
width: 60%;
padding: 10px;
border-radius: 6px;
background-color: lightcoral;
color: white;
margin-top: 30px;
}
</style>
<body>
<div id="time"></div>
<div id="time1"></div>
</body>
<script>
let time = new Date();
setInterval(() => {
time = new Date();
document.getElementById('time').innerHTML = `标准时间:${time}`;
document.getElementById('time1').innerHTML = `转化后的时间:${time.toLocaleDateString()} ${time.toLocaleTimeString()}`;
}, 1000)
document.getElementById('time').innerHTML = `标准时间:${time}`;
document.getElementById('time1').innerHTML = `转化后的时间:${time.toLocaleDateString()} ${time.toLocaleTimeString()}`
console.log(new Date());
</script>
</html>
展示效果
介绍
技术点
- 定时器;
- 获取当前时间;
- 时间转换格式;
- 获取元素且展示;
- ES6;
后续未完,请继续关注,Thanks!☺
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)