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

最新推荐文章于 2022-10-14 15:24:55 发布
最新推荐文章于 2022-10-14 15:24:55 发布
阅读量747 收藏 12
点赞数 1
分类专栏： Html+Css+JS / jQuery小型网页综合实战 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/user_from_future/article/details/124574175
版权

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

前言：
🧡作者简介：大家好我是 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 🧡 ~

user_from_future
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
钟表实现代码(网页版)
03-14
这是一个网页版的钟表(源码)实现,相信你会感兴趣！
图形化静态时钟
maggiejin的专栏
06-01 959
/*图形化静态时钟1.取小时：分钟2.计算时针和分针位置 1）表盘的一周是12小时，因此1小时将占据1/12圆周，即30度（360度/12），换处成弧度即30*2*3.14/360; 2)60分钟＝1小时，即每分钟时针走0.5度（30度/60）   表盘的一周是60分钟，因此1分钟分针针占据1/60圆周，即6度（360度/60）   故而，   $th=(30*$hour+0.5*$min)*(2
2021-02-17
weixin_46840701的博客
02-17 142
钟表（CSS练习6） 效果截图 使用了动画效果及transform，animation属性 代码部分 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
CSS 绘制一个时钟
老司机的后备箱
05-24 2424
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？ 你也可以访问这个 CSS clock或者以下代码片段查看实际效果 CSS clock CSS 绘制这样一个布局有几个难点： 环形排列的刻度 环形分布的数字 自动运行的指针 下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧 一、环形排列的刻度 提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器 <clock></clock> 加上一点锥形渐变 clock{
HTML和CSS写的一个时钟——每天学习一点点
sh15871942201的博客
07-24 661
每天学习一点点，今天用html和css写了一个时钟，不过是静态的。 由于有60个刻度，所以代码里的span是用excel表格来处理的。 后面学习了js后应该会简单点吧！奥里给！！！ 时钟主要分为四部分： 1、表盘 2、刻度 3、时针 4、分针 5、秒针 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
容器边框跳动
qq_41915899的博客
09-10 219
实现的样式是这样的 直接贴代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=..
JavaScript制作网页时钟
cashAAone的博客
07-26 1635
javascript 运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动
使用html制作时钟
gentlevxx的博客
10-14 2923
使用html和js制作动态时钟
html钟表代码原理,JS html时钟制作代码分享
weixin_42388485的博客
05-31 645
时钟效果图：闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，运用了html 的画布实现指针，背景图片引用了网络图片。具体原理：首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动。本人是JS开发程序员，从业1年多。闲来无聊的简单页面，欢迎大家提问，或者建议。共同进步代码...
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
qq_27939089的博客
07-12 1567
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码，非常好看，里面充分的利用了对jq+css的使用，希望对于各位程序猿有帮助！！！！
HTML静态网页作业
02-15
北邮信息网络应用基础HTML静态网页作业，下载后注意修改后使用（@-@）
静态网页制作课程设计
01-07
包含首页以及商城源代码，一共两千多行，欢迎下载一起交流
静态网页制作
07-01
静态网页制作初识Dreamweaver 8
静态网页制作——微信主页
04-07
根据html工具，完成静态网页的制作——微信主页。是一个练习题，相对原网页简化很多，只保留网页上所有静态的内容。
制作动态及静态Framework
02-26
有没有写SDK或者要将一些常用的工具类做成Framework的经历?你或许自己写脚本完成了这项工作，相信也有很多的人使用 iOS-Universal...关于静态库和动态库的概念，网上资料很多，这里不做叙述，只讲解制作过程。新建工程
html语言中钟表怎么做,使用HTML5和CSS3制作简单的钟表
weixin_31107269的博客
05-30 186
li{list-style:none;}#box{width:400px;height:400px;position:absolute;top:calc(50%-200px);left:calc(50%-200px);border:2pxsolidpalegoldenrod;}#dial{width:200px;height:200px;position:absolute;top:calc(50%...
CSS3简易表盘时钟
web前端学习部落22群
01-07 1875
css3时钟 .box{ width: 300px; height: 300px; border-radius: 50%; border: 5px solid #ccc; margin: 100px auto; position: relative; } .kedu{ width: 300px; height: 300px; border-radius: 50%; p
HTML网页时钟设计（js实现）
m0_45329584的博客
07-15 7783
HTML： <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页时钟</title> <meta name="Keywords" content="网页时钟"> <meta name...
html5 canvas画布实现钟表
JS 实现全选和反选
05-08 608
html5 canvas画布实现钟表 实现思路： 先创建画布，在画布中创建一个圆，然后创建出 时钟刻度和分钟刻度，以及时间，时针、分针、秒针所在的位置，用时间函数封装。 第一步：创建画布并创建圆 <body> <canvas id="myCanvas" width="400" height="400"></canvas> </body> &...
网页设计 制作静态网页
最新发布
04-10
以下是制作静态网页的基本步骤： 1. 使用文本编辑器创建一个新的HTML文件。 2. 在HTML文件中编写网页的结构和内容，包括标题、段落、图像、链接等。 3. 使用CSS样式表来设置网页的样式和布局，包括颜色、字体、边距...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值