【网页制作】原生JavaScript制作汉字时钟

user_from_future

于 2022-05-12 00:00:00 发布

阅读量766

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Html+Css+JS / jQuery小型网页综合实战文章标签： javascript jquery 前端 html css

本文链接：https://blog.youkuaiyun.com/user_from_future/article/details/124586206

Html+Css+JS / jQuery小型网页综合实战专栏收录该内容

9 篇文章

订阅专栏

本文教你如何使用jQuery和HTML/CSS实现一个创新的汉字时钟，通过动态布局和定时旋转，让传统数字时钟升级为汉字显示，体验不一样的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战，一个专注于分享网页制作实例的专栏~

专栏文章直链：
【网页制作】jQuery制作动态指针钟表
 【网页制作】jQuery模拟提交表单生成卡片
 【网页制作】制作静态钟表
 【网页制作】jQuery控制页面侧边栏的收缩与展开
 【网页制作】制作百度网盘登录页
 【网页制作】注册表单页
 【网页制作】jQuery操作css实现设置箭头图片

人生苦短，我用python

制作要求

在上一篇文章中，我们做了个动态指针时钟，觉得太普通了。这不，这次不要指针了，改成汉字旋转时钟~ 之前数字变成了现在的汉字，之前的指针动，变成了现在的 “表盘” 动。
由于是由自己想做，所以没有留下大致步骤文件，不过这里会给大家大致的制作步骤，分为三步，其中第二步出来的函数有点多，慢慢理解，相信肯定能学会的~

制作效果图

在这里插入图片描述

参考源代码

目录结构

└──网页文件夹
	└── clock.html

clock.html——第一步

首先我们毕竟是外观展示的，要先有个大致的框架布局。之前钟表有个大圆，我们啥都没，但可以上色表示我们有东西！
因为汉字是一行一行的，这里先显示一行的样子，用灰色代表钟表区域，红色、绿色、蓝色分别代表时、分、秒的区域，那个 <hr> 就是图中的时间线。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汉字时钟</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			hr {
				top: 400px;
				left: 400px;
				height: 1px;
				width: 420px;
				position: absolute;
				background-color: #000000;
			}

			ul {
				width: 100%;
				height: 100%;
				list-style: none;
				position: relative;
			}

			#hours,
			#minutes,
			#seconds {
				top: 365px;
				height: 40px;
				font-size: 16px;
				position: absolute;
				transform-origin: 50% 50%;
			}

			#clock {
				width: 800px;
				height: 800px;
				margin: 60px auto;
				background-color: gray;
			}

			#year {
				top: 365px;
				left: 295px;
				width: 240px;
				height: 40px;
				margin: auto;
				font-size: 20px;
				line-height: 40px;
				position: absolute;
			}

			#seconds {
				left: 0;
				width: 800px;
				background-color: blue;
			}
			
			#minutes {
				left: 100px;
				width: 600px;
				background-color: green;
			}

			#hours {
				left: 200px;
				width: 400px;
				height: 40px;
				background-color: red;
			}
		</style>
	</head>
	<body style="overflow-x: hidden; overflow-y: hidden">
		<div id="clock">
			<ul>
				<!--当前时间线-->
				<hr>
				<!--年容器-->
				<li id="year"></li>
				<!--秒容器-->
				<li id="seconds" class="on"></li>
				<!--分容器-->
				<li id="minutes" class="on"></li>
				<!--时容器-->
				<li id="hours" class="on"></li>
			</ul>
		</div>
	</body>
</html>

效果图如下：

在这里插入图片描述

clock.html——第二步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>汉字时钟</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			hr {
				top: 400px;
				left: 400px;
				height: 1px;
				width: 420px;
				position: absolute;
				background-color: #000000;
			}

			ul {
				width: 100%;
				height: 100%;
				list-style: none;
				position: relative;
			}

			li div,
			.on {
				transition: transform linear 0.5s;
			}

			#hours,
			#minutes,
			#seconds {
				top: 365px;
				height: 40px;
				font-size: 16px;
				position: absolute;
				transform-origin: 50% 50%;
			}

			.hours,
			.minutes,
			.seconds {
				height: 40px;
				line-height: 40px;
				text-align: right;
				position: absolute;
			}

			#clock {
				width: 800px;
				height: 800px;
				margin: 60px auto;
			}

			#year {
				top: 365px;
				left: 295px;
				width: 240px;
				height: 40px;
				margin: auto;
				font-size: 20px;
				line-height: 40px;
				position: absolute;
			}

			#seconds {
				left: 0;
				width: 800px;
			}

			.seconds {
				width: 800px;
			}

			#minutes {
				left: 100px;
				width: 600px;
			}

			.minutes {
				width: 600px;
			}

			#hours {
				left: 200px;
				width: 400px;
				height: 40px;
			}

			.hours {
				width: 400px;
			}
		</style>
	</head>
	<body style="overflow-x: hidden; overflow-y: hidden">
		<div id="clock">
			<ul>
				<!--当前时间线-->
				<hr>
				<!--年容器-->
				<li id="year"></li>
				<!--秒容器-->
				<li id="seconds" class="on"></li>
				<!--分容器-->
				<li id="minutes" class="on"></li>
				<!--时容器-->
				<li id="hours" class="on"></li>
			</ul>
		</div>
		<script type="text/javascript">
			var time = new Date();
			const character = [
				"零",
				"一",
				"二",
				"三",
				"四",
				"五",
				"六",
				"七",
				"八",
				"九",
				"十"
			];
			// 数字转换汉字的方法（秒/分/时/日/月/年）number 为数字，util 为单位
			function transform(number, util) {
				let text = (util === "年" ? String(number).split("").map(item => character[parseInt(item)]).join("") : number <= 10 ?
					character[number] : !(number % 10) ? character[Math.floor(number / 10)] + "十" : number < 20 ? "十" +
					character[number % 10] : character[Math.floor(number / 10)] + "十" + character[number % 10]);

				// 靠右对齐
				// return text + util;

				// 靠左对齐
				// return text + util + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
				// 	"　").join("") : " ");

				// 两端分散对齐
				// return text.slice(0, 1) + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
				// 	"　").join("") : " ") + text.slice(1) + util;

				// 数字靠左对齐、单位靠右对齐
				return text + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
					"　").join("") : " ") + util;
			}
			// 范围数字批量转汉字方法（秒/分/时）通过空列表索引创建范围整数，[0, number]
			function range_transform(number, util) {
				return Array.from(Array(number), (v, k) => k).map(item => transform(item, util));
			}
			// 布局时间容器
			function layout(item) {
				range_transform(item === "hours" ? 24 : 60, item === "hours" ? "时" : item === "minutes" ? "分" : " 秒").forEach(
					function(value, index) {
						let temp = document.createElement("div");
						temp.innerText = value;
						temp.className = item;
						document.getElementById(item).appendChild(temp);
					}
				)
				// 初始化延时展开动画
				let index = 0;
				document.getElementById(item).childNodes.forEach(function(temp) {
					setTimeout(function() {
						temp.style.transform = "rotateZ(-" + index * (item === "hours" ? 15 : 6) + "deg)";
						index++;
					}, 500 / (item === "hours" ? 24 : 60) * index / 2);
				})
			}
			document.getElementById("year").innerText = transform(time.getFullYear(), "年") + transform(time.getMonth() + 1, "月") + transform(time.getDate(), "日");
			layout("hours");
			layout('minutes');
			layout('seconds');
		</script>
	</body>
</html>

这一步是来实现所有 “刻度” 的，就是把时、分、秒的所有汉字都写出来，同时加入了打开（刷新）网页时的展开动画。
所有函数的作用在代码中也有注释，慢慢理解就行。
效果图：

在这里插入图片描述

clock.html——第三步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>汉字时钟</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			hr {
				top: 400px;
				left: 400px;
				height: 1px;
				width: 420px;
				position: absolute;
				background-color: #000000;
			}

			ul {
				width: 100%;
				height: 100%;
				list-style: none;
				position: relative;
			}

			li div,
			.on {
				transition: transform linear 0.5s;
			}

			#hours,
			#minutes,
			#seconds {
				top: 365px;
				height: 40px;
				font-size: 16px;
				position: absolute;
				transform-origin: 50% 50%;
			}

			.hours,
			.minutes,
			.seconds {
				height: 40px;
				line-height: 40px;
				text-align: right;
				position: absolute;
			}

			#clock {
				width: 800px;
				height: 800px;
				margin: 60px auto;
			}

			#year {
				top: 365px;
				left: 295px;
				width: 240px;
				height: 40px;
				margin: auto;
				font-size: 20px;
				line-height: 40px;
				position: absolute;
			}

			#seconds {
				left: 0;
				width: 800px;
			}

			.seconds {
				width: 800px;
			}

			#minutes {
				left: 100px;
				width: 600px;
			}

			.minutes {
				width: 600px;
			}

			#hours {
				left: 200px;
				width: 400px;
				height: 40px;
			}

			.hours {
				width: 400px;
			}
		</style>
	</head>
	<body style="overflow-x: hidden; overflow-y: hidden">
		<div id="clock">
			<ul>
				<!--当前时间线-->
				<hr>
				<!--年容器-->
				<li id="year"></li>
				<!--秒容器-->
				<li id="seconds" class="on"></li>
				<!--分容器-->
				<li id="minutes" class="on"></li>
				<!--时容器-->
				<li id="hours" class="on"></li>
			</ul>
		</div>
		<script type="text/javascript">
			var time = new Date();
			const character = [
				"零",
				"一",
				"二",
				"三",
				"四",
				"五",
				"六",
				"七",
				"八",
				"九",
				"十"
			];
			// 数字转换汉字的方法（秒/分/时/日/月/年）number 为数字，util 为单位
			function transform(number, util) {
				let text = (util === "年" ? String(number).split("").map(item => character[parseInt(item)]).join("") : number <= 10 ?
					character[number] : !(number % 10) ? character[Math.floor(number / 10)] + "十" : number < 20 ? "十" +
					character[number % 10] : character[Math.floor(number / 10)] + "十" + character[number % 10]);

				// 靠右对齐
				// return text + util;

				// 靠左对齐
				// return text + util + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
				// 	"　").join("") : " ");

				// 两端分散对齐
				// return text.slice(0, 1) + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
				// 	"　").join("") : " ") + text.slice(1) + util;

				// 数字靠左对齐、单位靠右对齐
				return text + ("年月日".indexOf(util) === -1 ? Array.from(Array(3 - text.length), (v, k) => k).map(item =>
					"　").join("") : " ") + util;
			}
			// 范围数字批量转汉字方法（秒/分/时）通过空列表索引创建范围整数，[0, number]
			function range_transform(number, util) {
				return Array.from(Array(number), (v, k) => k).map(item => transform(item, util));
			}
			// 布局时间容器
			function layout(item) {
				range_transform(item === "hours" ? 24 : 60, item === "hours" ? "时" : item === "minutes" ? "分" : " 秒").forEach(
					function(value, index) {
						let temp = document.createElement("div");
						temp.innerText = value;
						temp.className = item;
						document.getElementById(item).appendChild(temp);
					}
				)
				// 初始化延时展开动画
				let index = 0;
				document.getElementById(item).childNodes.forEach(function(temp) {
					setTimeout(function() {
						temp.style.transform = "rotateZ(-" + index * (item === "hours" ? 15 : 6) + "deg)";
						index++;
					}, 500 / (item === "hours" ? 24 : 60) * index / 2);
				})
			}
			// 初始化日期、更新时间
			function datetime_init() {
				time = new Date();
				time = {
					hours: time.getHours(), // 0-23
					minutes: time.getMinutes(), // 0-59
					seconds: time.getSeconds() // 0-59
				};
				for (let item in time) {
					if (document.getElementById(item).className === "") {
						document.getElementById(item).className = "on";
					}
					document.getElementById(item).style.transform =
						"rotate(" + time[item] * (item === "hours" ? 15 : 6) + "deg)";
					setTimeout(function() {
						if (time["seconds"] === 59) {
							document.getElementById("seconds").className = "";
							document.getElementById("seconds").style.transform = "rotate(-6deg)";
							if (time["minutes"] === 59) {
								document.getElementById("minutes").className = "";
								document.getElementById("minutes").style.transform = "rotate(-6deg)";
								if (time["hours"] === 23) {
									document.getElementById("hours").className = "";
									document.getElementById("hours").style.transform = "rotate(-15deg)";
									time = new Date();
									document.getElementById("year").innerText = transform(time.getFullYear(), "年") +
										transform(time.getMonth() + 1, "月") + transform(time.getDate(), "日");
								}
							}
						}
					}, 500);
				}
			}
			document.getElementById("year").innerText = transform(time.getFullYear(), "年") + transform(time.getMonth() + 1, "月") + transform(time.getDate(), "日");
			layout("hours");
			setTimeout("layout('minutes')", 600);
			setTimeout("layout('seconds')", 1200);
			setTimeout("setInterval(datetime_init, 1000)", 2000);
		</script>
	</body>
</html>