效果动图，此动图时间仅为当时录制的时间，实际运行时间为实时时间
思路
最主要是要通过 new Date()时间对象，获取各类实时时间，下面是一些常用的Date对象的一些常用属性和方法：
获取:
getFullYear(): 返回四位数的年份。
getMonth(): 返回月份，范围是0-11。
getDate(): 返回月份中的日期，范围是1-31。
getHours(): 返回小时，范围是0-23。
getMinutes(): 返回分钟，范围是0-59。
getSeconds(): 返回秒数，范围是0-59。
getTime(): 返回自1970年1月1日00:00:00 UTC至该日期对象的毫秒数。
getDay(): 返回一周中的第几天，范围是0-6，其中0代表星期日。
getHours(): 返回本地的小时，范围是0-23。
getUTCHours(): 返回UTC（协调世界时）的小时数，范围是0-23。设置:
setFullYear(year): 设置四位数的年份。
setMonth(month): 设置月份，范围是0-11。
setDate(date): 设置月份中的日期，范围是1-31。
setHours(hours): 设置小时，范围是0-23。
setMinutes(minutes): 设置分钟，范围是0-59。
setSeconds(seconds): 设置秒数，范围是0-59。
setMilliseconds(milliseconds): 设置毫秒数，范围是0-999。
getTime(): 返回自1970年1月1日00:00:00 UTC至该日期对象的毫秒数。
getDay(): 返回一周中的第几天，范围是0-6，其中0代表星期日。
getHours(): 返回本地的小时，范围是0-23。
getUTCHours(): 返回UTC（协调世界时）的小时数，范围是0-23。补充：
toString()：将日期转换为字符串。
toLocaleDateString()：将日期转换为本地格式的字符串。
toTimeString()：将时间转换为字符串。
toLocaleTimeString()：将时间转换为本地格式的字符串。文章来源：https://www.toymoban.com/news/detail-775731.html
附上全部代码，代码内有详细注释文章来源地址https://www.toymoban.com/news/detail-775731.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时电子时钟</title>
<!-- 定义样式 -->
<style>
.box {
width: 300px;
height: 150px;
background-color: rgb(42, 48, 64);
margin: 50px auto;
}
.oneDay {
height: 100px;
width: 100%;
color: white;
font-size: 60px;
font-weight: 600;
text-align: center;
line-height: 100px;
}
.month {
height: 50px;
width: 100%;
color: white;
text-align: center;
letter-spacing: 2px
}
</style>
</head>
<body>
<div class="box"> <!-- 创建一个div容器，设置样式为.box -->
<div class="oneDay"></div> <!-- 在盒子中创建一个div，设置样式为.oneDay -->
<div class="month"></div> <!-- 在盒子中创建一个div，设置样式为.month -->
</div>
<script>
const day = [ '一', '二', '三', '四', '五', '六','日'] // 定义一个数组day，包含了一周中每一天的汉字表示
setInterval(function () { // 创建一个定时器
const date = new Date() // 获取当前时间并存储在变量date中
let nowHours = date.getHours() // 获取当前时间的小时数
const nowMinutes = date.getMinutes() // 获取当前时间的分钟数
let nowSecond = date.getSeconds() // 获取当前时间的秒数
nowHours = nowHours < 10 ? '0' + nowHours : nowHours // 如果当前小时数小于10，则在前面添加0
nowSecond = nowSecond < 10 ? '0' + nowSecond : nowSecond // 如果当前秒数小于10，则在前面添加0
// 将当前时间显示在.oneDay的div容器中
document.querySelector('.oneDay').innerHTML = `${nowHours}:${nowMinutes}:${nowSecond}`
}, 1000) // 设置定时器的时间间隔为1000毫秒
setInterval(function () { // 创建另一个定时器
const date = new Date() // 获取当前时间并存储在变量date中
const nowMonth = date.getMonth() // 获取当前月份
const nowDate = date.getDate() // 获取当前日期
const nowDay = date.getDay() // 获取当前星期几对应的数字
// 将当前日期和星期几以及月份显示在.month的div容器中
document.querySelector('.month').innerHTML = `${nowMonth + 1}月${nowDate}日 星期${day[nowDay-1]}`
}, 1000) // 设置定时器的时间间隔为1000毫秒
</script>
</body>
</html>到了这里，关于JavaScript 制作实时电子时钟 ，点赞加关注经典案例持续更新~的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
