JavaScript实现动态数字时钟
作者：小脆筒style 发布时间：2024-04-10 11:01:09
标签：js,数字时钟
本文实例为大家分享了JavaScript实现动态数字时钟的具体代码，供大家参考，具体内容如下
实现效果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<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>
素材
来源：https://blog.csdn.net/weixin_46672830/article/details/116095996
0
投稿猜你喜欢
- mysql的in会让索引失效吗？不会！ 看结果：mysql> desc select * from tb_province where
1.返回值介绍现实生活中的场景:我给儿子10块钱，让他给我买包烟。这个例子中，10块钱是我给儿子的，就相当于调用函数时传递到参数，让儿子买烟- 接管Dingo-api的错误如上图所示，AppServiceProvider.php中的register()方法中添加如下代码\API::e
- 要求：求出列表中的所有值的最大数，包括列表中带有子列表的。按照Python给出的内置函数（max）只能求出列表中的最大值，无法求出包括列表中
- （&，|）和（and，or）是两组比较相似的运算符，用在“与”/ “或”上，在用法上有些许区别。 （&，|）和（and，or
- 发现问题python嵌套列表大家应该都不陌生，但最近遇到了一个问题，这是工作中遇到的一个坑，首先看一下问题raw_list = [[&quo
- Python读取及保存mat文件在说明python读取mat文件之前需要强调2点：读取的时候需要注意读出来的shape是什么样的，是否符合自
- 最近，帮同事重写了一个MySQL SQL语句，该SQL语句涉及两张表，其中一张表是字典表（需返回一个字段），另一张表是业务表（本身就有150
- oracle如果存储过程比较复杂，我们要定位到错误就比较困难，那么可以存储过程的调试功能先按简单的存储过程做个例子，就是上次做的存储过程（p
- python matplotlib画图使用colorbar工具自定义颜色 colorbar（draw colorbar without an
- 今天将一个ACC的数据库转换成ms-sql以后发现在使用replace替换语句的时候出现： SQL中函数 replace 的参数 1 的数据
- 通过HTTP_USER_AGENT判断用户是从手机上访问，还是电脑IE上访问。 asp代码片段：主要使用了正则匹配手机环境，大家可以补充手机
- 本文实例讲述了mysql游标的原理与用法。分享给大家供大家参考，具体如下：本文内容：什么是游标创建游标使用游标首发日期：2018-04-18
- 示例1：pycallclass.cpp：#include <iostream>using namespace std;typed
- 我就废话不多说了，直接上代码吧！'''python对象销毁(垃圾回收)'''class Po
- 1、开始－＞运行，输入SERVICES.MSC到服务里，停止所有Oracle服务； 2、开始－＞程序－＞Oracle - OraHome81
- 这篇文章主要介绍了基于Python实现ComicReaper漫画自动爬取脚本过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具
- 这篇文章主要介绍了python已协程方式处理任务实现过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的
- PyMySQL介绍PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库，Python2中则使用mysqldb
- 在我们制作网页的时候会经常碰到一些需求，如果不知道方法，说不定会困扰我们半天。其实实现它们都很简单，下
