【网页制作】制作静态钟表

最新推荐文章于 2024-01-19 17:49:20 发布
原创 最新推荐文章于 2024-01-19 17:49:20 发布 · 1k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

本文档提供了一个使用HTML和CSS创建静态钟表的实例，详细展示了如何利用定位、圆角、旋转等CSS属性制作钟面、指针和刻度。通过手动编写代码，展示了钟表的各个组成部分，包括秒针、分针、时针和刻度标记。实例适合初学者了解和练习网页布局及CSS样式控制。

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

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

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

人生苦短，我用python

制作要求

合理使用html + css制作静态钟表。

制作效果图

在这里插入图片描述

参考源代码

目录结构

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

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 300px;
				height: 300px;
				position: absolute;
				background-color: gray;
				border-radius: calc(50%);
			}

			.box2 {
				width: 280px;
				height: 280px;
				background-color: skyblue;
				margin: 9px auto;
				border: 1px solid #000;
				border-radius: calc(50%);
				position: relative;
			}

			.s {
				width: 8px;
				height: 60px;
				background-color: #000;
				position: absolute;
				top: 140px;
				left: 136px;
				transform: rotateZ(45deg);
				transform-origin: 50% 0;
			}

			.f {
				width: 6px;
				height: 90px;
				background-color: #000;
				position: absolute;
				top: 140px;
				left: 137px;
				transform: rotateZ(30deg);
				transform-origin: 50% 0;
			}

			.m {
				width: 4px;
				height: 120px;
				background-color: #000;
				position: absolute;
				top: 140px;
				left: 138px;
				transform: rotateZ(15deg);
				transform-origin: 50% 0;
			}

			.d1 {
				width: 280px;
				height: 280px;
				position: relative;
			}

			.d1>div {
				top: 130px;
				width: 280px;
				height: 20px;
				line-height: 20px;
				text-align: right;
				position: absolute;
			}
			
			.d2 {
				width: 16px;
				height: 4px;
				float: right;
				margin: 8px 0;
				background-color: #000000;
			}
			
			.d3 {
				width: 8px;
				height: 2px;
				float: right;
				margin: 8px 0;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="s"></div>
				<div class="f"></div>
				<div class="m"></div>
				<div class="d1">
					<div style="transform: rotateZ(0deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(6deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(12deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(18deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(24deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(30deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(36deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(42deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(48deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(54deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(60deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(66deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(72deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(78deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(84deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(90deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(96deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(102deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(108deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(114deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(120deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(126deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(132deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(138deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(144deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(150deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(156deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(162deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(168deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(174deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(180deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(186deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(192deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(198deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(204deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(210deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(216deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(222deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(228deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(234deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(240deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(246deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(252deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(258deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(264deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(270deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(276deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(282deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(288deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(294deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(300deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(306deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(312deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(318deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(324deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(330deg);"><div class="d2"></div></div>
					<div style="transform: rotateZ(336deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(342deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(348deg);"><div class="d3"></div></div>
					<div style="transform: rotateZ(354deg);"><div class="d3"></div></div>
				</div>
			</div>
		</div>
	</body>
</html>

小小说一说

由于对方不会使用js生成刻度，所以我只能陪着手动敲上这么多行代码，哎…

致谢

本篇实例素材来自于 X Y H 🧡 ~

【网页制作】jQuery制作动态指针钟表
user_from_future的博客
05-11 1485
jQuery制作动态指针钟表
使用HTML实现一个静态页面（含源码）
HTML网页设计
08-08 4353
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获优快云年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒......
钟表实现代码(网页版)
03-14
这是一个网页版的钟表(源码)实现,相信你会感兴趣！
基于 css 版时钟
09-01
利用css 做的时钟
天气预报_HTML静态页面_带时钟.zip
06-19
天气预报_HTML静态页面_带时钟。页面元素包括：自定义的标题，日期时间，温度，天气，地点，还有一个不停滚动读秒的时钟。
在线闹钟html代码复制,html5时钟实现代码
weixin_32951341的博客
05-30 634
复制代码代码如下:canvas{position:absolute;top:0px;left:0px;}时钟//获取绘图对象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var p_canvas = document.getElementById('p_canvas');va...
JavaScript制作网页时钟
cashAAone的博客
07-26 1982
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动
基于QT的数字钟表制作.doc
01-17
4. 同时添加两个LCD Number控件，一个用于显示闪烁的时间，另一个用于显示静态的时间。 5. 设置这两个LCD Number控件的字体样式为加粗、黑体，字号为14号。 6. 初始化一个QTimer对象，用于定时更新时间，并将其与...
不是说这两个是制作网页的吗，能用作我说的那个钟表系统吗
最新发布
03-08
我的回答需要说明：单独使用HTML/CSS可以创建静态钟表外观，但要实现动态效果必须结合JavaScript。同时，用户可能对技术栈的分工不太清楚，需要解释三者如何协作。 另外，用户可能对“系统”一词有误解，钟表系统...
【css笔记】电商平台静态页面导航栏制作
weixin_48391379的博客
03-17 958
要用浮动来做，保证ul的宽度能装下所有li，露出的边缘用overflow ：hidden，经常把li里面的a转换成块级元素，用i装小图标，然后给i定好高度大小（记得转换成行内元素），但是每个a块里面装的i块，用margin-top会有外边距塌陷的问题，所以需要在a里面写overflow：hidden 焦点图： 用ul>li>a>img来放多张图 ...
纯CSS实现钟表
huangqiang80的博客
11-09 1908
纯CSS实现钟表 思路： 1、先创建一个表盘div。 2、再在表盘div里设置三个子div，分别作为秒针、分针、时针的旋转载体 3、最后在三个子div里分别再设置一个div，作为秒针、分针、时针 4、表盘可以用背景图片，也可以用css写，我这里直接百度了一张表盘的图片 效果： 图片： 代码： <style> /* 表盘 */ .biao-pan { width: 300px; height: 300px; margin: 150px auto; bor
【前端】简单js语言制作网页时钟
CHAOQIWEN的博客
07-13 573
学习js语言中的date对象，利用date对象的内置函数，完成一个简易网页时钟的界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网页时钟</title> <script> function genNewDate(){...
css画钟表_利用css+原生js制作简单的钟表
weixin_40008946的博客
12-19 241
利用css+原生js制作简单的钟表。效果如下所示实现该效果，分三大块：html、javascript、csshtml部分html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多，采用jvascript生成时钟css部分开始代码之前，有一些css的属性需要了解，比如定位(position)，边框圆角(border-radius)...
css3实现钟表效果
weixin_30716725的博客
10-17 191
利用css3 transform属性刻画钟表的的刻度以及指针的角度,代码如下： <head> <meta charset="UTF-8"> <title>Title</title> <style id="style"> html{height:100%;} body{width:100%;h...
【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
飛天网事
09-23 3236
使用CSS3纯代码来实现模拟时钟，及指针动画功能。 在这里主要使用到css3一些基本元素： border-radius：圆角边框，画圆形；表盘 Transform：变换，旋转，扭曲；刻度盘，指针形状 Animation：时分秒指针转动。 :before/:after :伪元素 基本思路： 3
css 钟表
全易
05-03 572
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css钟表</title> <style> body { background-color: bisque; } .cl...
css时钟
安陵的博客
11-01 938
**css时钟**纯css时钟表盘和动画要求实际结果表盘表盘底部针代码 纯css时钟表盘和动画 web前端的老师留下了一个只能用css做时钟的作业，尝试了一下，但表针拼接的还是有点怪异。 要求 实际结果 表盘 这里我的表盘主要由表盘底部，针，和响应顶部三部分 表盘底部 表盘底部是三层，分别有三个div块， 最下面是一个绿色的大圆，其上是一个稍小的蓝色圆，蓝色圆上面是另一种蓝色的半圆，共同构...
CSS实现钟表
FanZaiYo的博客
03-31 354
/* 定位属性 相对行为relative 绝对定位absolute 固定定位fixed /* 相对定位 1.是相对于自身原来的位置 2.还占据原来的位置 */ /* position: relative; bottom: 10px; left: 10px; */ /* 绝对定位 1.相对于有定位属性的父...
利用HTML+CSS+JS打造炫酷时钟网页的完整指南
奇遇少年
01-19 4647
如何使用HTML、CSS和JavaScript来创建一个炫酷的时钟网页。
labview制作圆形钟表
02-22
### 使用 LabVIEW 创建圆形时钟界面 #### 设计思路 为了创建一个功能完整的圆形时钟，在LabVIEW环境中可以利用图形化编程的优势来构建此应用。通过自定义前面板对象以及编写相应的程序逻辑，能够模拟传统机械钟表的外观和行为。 #### 前面板布局 - **背景图片**：可以选择一张具有小时标记的标准圆盘图像作为静态背景放置于最底层[^1]。 - **指针组件** - 小时、分钟及秒数指示器均采用矢量箭头形式表示，并且各自独立设置颜色以便区分。 - 这些元素应该被配置成可旋转的对象，允许后续代码对其进行角度调整[^3]。 #### 编程实现 以下是用于驱动时间更新的核心VI片段： ```labview While Loop // 主循环结构保持持续运行状态 Invoke Node "Get System Time" // 获取当前系统时间 Case Structure // 判断是否到达整秒时刻以触发刷新动作 True Case Local Variable "Second Angle", "Minute Angle", and "Hour Angle" Calculate new angles based on current time values Second_Angle = (Seconds × 6) mod 360; Minute_Angle = ((Minutes + Seconds / 60) × 6) mod 360; Hour_Angle = (((Hours % 12) + Minutes / 60) × 30) mod 360; End Calculation For Each Pointer Object Do Property Node "Rotation" Set to calculated angle value End Update Pointers False Case Wait Until Next ms Multiple of... // 设置适当延迟减少CPU占用率 End While Loop ``` 上述伪代码展示了如何计算各个指针的角度位置并通过属性节点改变其方向从而达到动态显示的效果。需要注意的是实际开发过程中应当优化性能参数确保流畅体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值