HTML时钟

最新推荐文章于 2023-08-01 20:34:28 发布
最新推荐文章于 2023-08-01 20:34:28 发布
阅读量91 收藏 1
点赞数 1
文章标签： js web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46518331/article/details/112759150
版权

@TOC2021年寒假见习练习

HTML时钟

2021年寒假见习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script >
			//document.createElement();
			//item.style.cssText=""
			//appendChild()
			
			//绘制表盘
			var item=document.createElement("div");
				item.style.cssText=`
				width:200px;
				height:200px;
				border:1px solid #000;
				margin:0 auto;
				border-radius:50%;
				position:relative;
			`;
			document.body.appendChild(item);
			
			//document.body.createElement("div");
			
			//绘制刻度
			for(var i=0;i<60;i++){
				var mark=document.createElement("div");
					mark.style.cssText=`
					width:4px;
					height:${i%5===0?10:5}px;
					background:#000;
					position:absolute;
					left:98px;
					top:0;
					transform-origin:center 100px;
					transform:rotate(${i*6}deg)
				`;
				item.appendChild(mark);
			}
			
			
			//时针,分针,秒针的制作
			//秒针
			var secondEle=document.createElement("div");
			secondEle.style.cssText=`
			width:80px;
			height:2px;
			background:red;
			position:absolute;
			left:100px;
			top:99px;
			transform-origin:left center;
			`;
			item.appendChild(secondEle);
			//分针
			var minuteEle=document.createElement("div");
			minuteEle.style.cssText=`
			width:70px;
			height:4px;
			background:yellow;
			position:absolute;
			left:100px;
			top:98px;
			transform-origin:left center;
			`;
			item.appendChild(minuteEle);
			//时针
			var hourEle=document.createElement("div");
			hourEle.style.cssText=`
			width:50px;
			height:6px;
			background:#000;
			position:absolute;
			left:100px;
			top:97px;
			transform-origin:left center;
			`;
			item.appendChild(hourEle);
			//指针的转动
			setInterval(function() {
				var date=new Date();
				var hours=date.getHours();
				var minutes=date.getMinutes();
				var seconds=date.getSeconds();
				hourEle.style.transform=`rotate(${hours*30+minutes*0.5-90}deg)`;
				minuteEle.style.transform=`rotate(${minutes*6-90}deg)`;
				secondEle.style.transform=`rotate(${seconds*6-90}deg)`;
			},1000)
			
			//数字
			var numbers=[3,4,5,6,7,8,9,10,11,12,1,2];
			var center=document.createElement("div");
			center.style.cssText=`
				width:2px;
				height:2px;
				position:absolute;
				left:99px;
				top:99px;
			`;
			item.appendChild(center);
			
			for(var i=0;i<12;i++){
				var div=document.createElement("div");
				var left=Math.cos(i*Math.PI/6)*80-10;
				var t=Math.sin(i*Math.PI/6)*80-10;
				div.style.cssText=`
					width:20px;
					height:20px;
					position:absolute;
					left:${left}px;
					top:${t}px;
					text-align:center;
					line-height:20px;
				`;
				div.innerHTML=numbers[i];
				center.appendChild(div);
			}
		</script>
	</body>
</html>

效果图

重点知识
javascript中的变量如何声明
使用var可以声明变量
javascript中的流程控制有哪些结构
单路分支
If(){}
双路分支
If(){}else{}
多路分支
If(){}else if(){}else{}
循环结构
for(var i=0;i<10;i++){}
什么是数组
数组就是存储一系列值的结构 [1,2,3,4] [“张三”,”李四”]
什么是对象
对象就是现实中具体的物体和抽象的规则在程序世界中的体现 {name:”王琦”,major:”工程师”,age:18}

获取一个随机整数的方式
Math.ceil(Math.random()*n);
javascript中的定时器函数是?
setInterval();
设置一个元素的内容通过什么方式？
innerHTML

weixin_46518331
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html时钟，html时钟
11-30
HTML时钟是一种利用HTML、CSS和JavaScript技术来创建的网页元素，它可以在网页上实时显示当前时间。在网页设计中，HTML（超文本标记语言）主要用于构建页面结构，CSS（层叠样式表）用于美化页面样式，而JavaScript则...
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 4万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
html实现时钟
祎祎的博客
07-19 2881
【代码】html实现时钟。
使用html制作时钟
gentlevxx的博客
10-14 3008
使用html和js制作动态时钟
炫酷时钟html
本人喜欢编程（c/c++/嵌入式/单片机硬件制作）、听音乐、偶尔看电影、看书、爱研究、有好奇心
10-01 1486
html 炫酷时钟
14款超时尚的HTML5时钟动画
delishcomcn的博客
07-19 1081
时钟动画在网页应用中也非常广泛，在一些个人博客中，我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画，其中有圆盘时钟、3D时钟、个性化时钟等，强大的HTML5为时钟动画增添了不少精彩，希望能给大家带来帮助。
HTML时钟canvas
10-14
在这个“HTML时钟canvas”项目中，我们看到开发者利用Canvas结合JavaScript技术，创建了一个富有创意的时钟界面，同时融入了“毒鸡汤”这样的趣味元素，为用户提供了一种独特的桌面壁纸体验。 首先，Canvas是HTML5...
HTML时钟代码
12-03
HTML时钟代码
JS html时钟制作代码分享
10-20
在本文中，我们将深入探讨如何使用JavaScript（JS）和HTML创建一个实时的模拟时钟。这个时钟的设计灵感来源于传统的机械表，通过HTML的Canvas元素绘制指针，并利用JavaScript进行动态更新，使得指针每秒根据当前时间...
五步轻松实现JavaScript HTML时钟效果
10-18
主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js html5实现简易指针时钟表代码.zip
07-05
js html5实现简易指针时钟表代码是一款个性的自动获取本地时间指针时钟特效下载。
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
HTML制作简单的时钟
Lin_52025的博客
08-03 9148
HTML制作简单的时钟 使用HTML、CSS、jQuery、JS制作时钟，能获取到系统时间使得时钟上的指针进行实时的改变，话不多说上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi...
html时钟代码
Java
10-15 2979
练习 canvas{ border:1px solid #000; display:block; margin:auto; }
HTML实现时钟
hellolater的博客
04-29 2791
效果图如下： HTML代码： <!--时钟--> <div> <canvas id="clock" style="border: 0px solid #ccc" height="200px" width="200px"></canvas> <script type="text/javascript" src="js/clock.js"></script> </div
html如何添加时钟效果,transform实现的时钟效果
weixin_31913479的博客
06-03 323
transform实现的时钟效果又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。哈哈~需要的js才能实现到走动这个效果，但js的内容不多，也不难。主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性(rotate)实现了，它的刻度使用旋转且把旋转点设置在圆心，那...
纯 html,css,js 实现动态时钟
最新发布
qq_42981665的博客
08-01 370
/ 将时针 分针 秒针 加入到 clock。// 动态改变表针状态 每秒一次。// 创建时针 分针 秒针。
html 时钟怎样居中,怎么用css3做时钟刻度
weixin_29368453的博客
06-19 493
首先要明确，表盘一周是360°并有60个小刻度。也就是每个刻度从0°(12点位置)开始递加6°。拿其中5个刻度为例，代码如下：html代码布局：css样式表：(相关课程推荐：css视频教程)/* 清除默认样式 */*{margin: 0;padding: 0}li{list-style: none}/* 将表盘设置成半径为100px的原型，并为其加上边框 */#ul1{width: 200px;h...
html实现旋转时钟
路在前方
07-10 4211
旋转时钟 *{ margin:0; padding:0; background:#669; } html,body{ width:100%; height:100%; overflow: hidden; } #clock { position: relative; width: 100%; height: 100%; } .label{ display:inline-block; text-align: center;
html 时钟
06-02
以下是一个简单的 HTML 时钟示例： ```html <!DOCTYPE html> <html> <head> <title>HTML 时钟</title> <style> .clock { display: block; margin: 50px auto; width: 200px; height: 200px; border-radius: 50%; border: 10px solid #333; position: relative; } .hour-hand { position: absolute; top: 50%; left: 50%; transform-origin: bottom; height: 40px; width: 6px; background: #333; margin-left: -3px; } .minute-hand { position: absolute; top: 50%; left: 50%; transform-origin: bottom; height: 60px; width: 4px; background: #333; margin-left: -2px; } .second-hand { position: absolute; top: 50%; left: 50%; transform-origin: bottom; height: 80px; width: 2px; background: red; margin-left: -1px; z-index: 1; } .dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: #333; z-index: 2; } </style> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="dot"></div> </div> <script> function updateClock() { let now = new Date(); let hour = now.getHours(); let minute = now.getMinutes(); let second = now.getSeconds(); let hourHand = document.querySelector(".hour-hand"); let minuteHand = document.querySelector(".minute-hand"); let secondHand = document.querySelector(".second-hand"); let hourDegree = hour * 30 + minute * 0.5; let minuteDegree = minute * 6; let secondDegree = second * 6; hourHand.style.transform = `rotate(${hourDegree}deg)`; minuteHand.style.transform = `rotate(${minuteDegree}deg)`; secondHand.style.transform = `rotate(${secondDegree}deg)`; } setInterval(updateClock, 1000); </script> </body> </html> ``` 这个时钟由一个圆形的表盘和三个时针组成，使用 CSS 进行样式设置，并使用 JavaScript 每秒更新时针的旋转角度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值