HTML时钟

最新推荐文章于 2025-07-08 13:52:08 发布

原创最新推荐文章于 2025-07-08 13:52:08 发布 · 138 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #web #前端

这是一篇关于2021年寒假见习期间的HTML时钟制作练习，涵盖了JavaScript的基础知识，如变量声明、流程控制结构（if、else、switch）、循环（for循环）、数组、对象的介绍，以及如何获取随机整数和使用定时器函数setInterval更新元素内容的方法。

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

@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