【网页制作】jQuery制作动态指针钟表

原创

于 2022-05-11 00:00:00 发布 · 1.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript #html

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

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

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

人生苦短，我用python

制作要求

这一次终于不是因为要帮助别人才做了，而是因为，觉得之前那个钟表丑，而且还不动，这不，悠闲的我就单独整个动态钟表，这不比那静态钟表好嘛~

制作效果图

在这里插入图片描述

参考源代码

目录结构

└──网页文件夹
	├──num_clock_study1.html
	├──num_clock_study2.html
	├──num_clock_study3.html
	└──num_clock_study4.html

依旧是分布教学（实际上是一开始准备教学她，但实际上她最后要求的图形和我这不一样所以改成自由发挥了）。

num_clock_study1.html

这里面body里可以通过输入 ul#clock>li#scale+li#seconds+li#minutes+li#hours 然后敲个 Tab 键就可以生成那六行了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字时钟_num_clock_study1_画居中圆</title>
		<style>
			* {
     
     
				margin: 0;
				padding: 0;
			}

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

			#clock {
     
     
				width: 800px;
				height: 800px;
				margin: 60px auto;
				border-radius: 50%;
				border: 1px solid #000;
				background-color: #FFF;
			}
		</style>
	</head>
	<body>
		<!-- ul#clock>li#scale+li#seconds+li#minutes+li#hours -->
		<ul id="clock">
			<li id="scale"></li>
			<li id="seconds"></li>
			<li id="minutes"></li>
			<li id="hours"></li>
		</ul>
	</body>
</html>

看着代码不多也不少，整出来了个啥？

在这里插入图片描述

居然才整出了个圆？不，这是一个带有分布预算的圆~ 因为接下来哪部分放哪边已经规划好了~

num_clock_study2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字时钟_num_clock_study2_画指针</title>
		<style>
			* {
     
     
				margin: 0;
				padding: 0;
			}

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

			#clock {
     
     
				width: 800px;
				height: 800px;
				margin: 60px auto;
				border-radius: 50%;
				border: 1px solid #000;
				background-color:</

最低0.47元/天解锁文章