JavaScript实现动态数字时钟
作者：小脆筒style
这篇文章主要为大家详细介绍了JavaScript实现动态数字时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现动态数字时钟的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<style>
padding: 0;
margin: 0;
#box {
width: 1000px;
height: 300px;
background-image:url(1.jpg);
line-height: 300px;
text-align: center;
font-size: 50px;
font-weight: 500;
margin: 100px auto;
</style>
</head>
<div id="box"></div>
<script>
let box = document.getElementById('box')
//不足十位补零
let addZero = val => val < 10 ? '0' + val : val
//把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表
let trans = val => {
let obj = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六'
return obj[val]
setTime ()
//获取时间的方法
function setTime() {
let time = new Date();
let year = time.getFullYear(); // 获取年
let month = time.getMonth() + 1; // 获取月（是从0到11，所以我们要给他加1）
let date = time.getDate(); // 获取日
let day = time.getDay(); // 获取星期几(0是星期日)
let hour = time.getHours(); // 获取小时
let min = time.getMinutes(); // 获取分钟
let sec = time.getSeconds(); // 获取秒
let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) +
'时' + addZero(min) + '分' + addZero(sec) + '秒'
// 把所有的时间拼接到一起
box.innerText = value
// console.log(value)
// 把拼接好的时间插入到页面
// 让定时器每间隔一秒就执行一次setTime这个方法（这是实现时钟的核心）
setInterval(setTime, 1000)
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家
您可能感兴趣的文章:
ECMAScript 数据类型之Number类型
2022-06-06
Echarts如何重新渲染实例详解
2022-05-05
能够让你事半功倍的JS utils工具函数详解
2022-05-05
分享JavaScript 类型判断的几种方法
2022-05-05
JavaScript实现动态时钟效果
2022-05-05
JavaScript中的this例题实战总结详析
2022-05-05
Javascript单线程和事件循环
2022-05-05
JavaScript内存管理与闭包实例详解
2022-05-05
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
