使用SVG制作简单的时钟效果

最新推荐文章于 2022-04-19 12:34:46 发布

chunzhuang9775

最新推荐文章于 2022-04-19 12:34:46 发布

阅读量810

点赞数 1

原文链接：https://my.oschina.net/u/3490747/blog/907630

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg钟表</title>
<style type="text/css">
svg{margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}
path{stroke-dashoffset:10106;stroke-dasharray:10106;transition:stroke-dashoffset 3s;}
svg:hover path{stroke-dashoffset:0;}
</style>
<script src="jquery-3.1.1.js"></script>
<script>
$(function(){
	//$("line").attr("x2",800);
	
	//1.绘制表盘
	var svg=$("svg")
	var ns="http://www.w3.org/2000/svg"
	var dom=document.createElementNS(ns,"circle");  //原生js创建circle元素
	$(dom).attr({  //设置表盘的样式属性
		cx:300,  //圆心横坐标
		cy:300,  //圆心纵坐标
		r:200,  //半径
		stroke:"rgb(0,204,255)",  //表盘颜色
		"stroke-width":5,  //表盘线条宽度
		fill:"none"  //无填充
	}).appendTo(svg);  //将设置好属性的circle元素添加到svg中去
	
	//2.绘制钟表刻度
	for(var i=0;i<60;i++){  //需要绘制60个刻度，使用for循环
		var deg=i*Math.PI*2/60-Math.PI*2/4;  //Math.PI*2/60-->1个刻度|Math.PI*2/60-Math.PI*2/4-->钟表的起始刻度位于12点钟方向|变量随i的变化而变化
		var cir=document.createElementNS(ns,"circle");  //圆形刻度
		$(cir).attr({
			r:i%5==0?8:3,  //5的倍数刻度半径为8，否则半径为3
			cx:300+180*Math.cos(deg),  //180是自定义的数值，大小决定刻度距离表盘中心的远近；300是表盘中心
			cy:300+180*Math.sin(deg),
			fill:"rgb(0,204,255)"
		}).appendTo(svg);
	};
	
	//3.绘制时针
	var sLine=document.createElementNS(ns,"line");  //秒针
	var mLine=document.createElementNS(ns,"line");  //分针
	var hLine=document.createElementNS(ns,"line");  //时针
	
	//将秒、分、时针加入到svg标签中
	$(sLine).appendTo(svg);  
	$(mLine).appendTo(svg);
	$(hLine).appendTo(svg);
	
	function line(){  //表针移动函数（通过改变时针的属性实现时针的动态效果）
		
		//获取时间
		var date=new Date();
		var s=date.getSeconds();
		var m=date.getMinutes();
		var h=date.getHours();
		
		//时分秒根据时间变化呈现的行走角度
		var s_deg=s*Math.PI*2/60-Math.PI*2/4;
		var m_deg=(m+s/60)*Math.PI*2/60-Math.PI*2/4;
		h=h%12;  //h取值范围是0~23，当超过12时，重新赋值为它的取余值
		var h_deg=(h+m/60+s/3600)*Math.PI*2/12-Math.PI*2/4;  //这里注意：Math.PI*2/12 除以12是因为小时只有12个刻度
		
		//秒针
		$(sLine).attr({
			x1:300,
			y1:300,
			x2:300+160*Math.cos(s_deg),  //线条终点横坐标
			y2:300+160*Math.sin(s_deg),  //线条终点纵坐标
			"stroke-width":1,
			stroke:"rgb(0,204,255)"
		});
		
		//分针
		$(mLine).attr({
			x1:300,
			y1:300,
			x2:300+140*Math.cos(m_deg),
			y2:300+140*Math.sin(m_deg),
			"stroke-width":3,
			"stroke-linecap":"round",
			stroke:"rgb(0,155,255)"
		});
		
		//时针
		$(hLine).attr({
			x1:300,
			y1:300,
			x2:300+120*Math.cos(h_deg),
			y2:300+120*Math.sin(h_deg),
			"stroke-width":5,
			"stroke-linecap":"round",
			stroke:"rgb(0,124,255)"
		});

	};
	line();
	setInterval(line,1000);  //开启定时器，不断刷新时分秒

	
})
	
</script>
</head>

<body>
<svg width="800" height="800">
	<!--<line x1=10 y1=100 x2=300 y2=200 style="stroke:rgb(0,204,255);stroke-width:3"></line>-->
	<!--<circle cx="50" cy="50" r="40" stroke="green" stroke-width="5" fill="yellow" />-->
</svg>
</body>
</html>

转载于:https://my.oschina.net/u/3490747/blog/907630

chunzhuang9775

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用SVG制作简单的时钟效果

<!doctype html><html><head><meta charset="utf-8"><title>svg钟表</title><style type="text/css">svg{mar...
复制链接

扫一扫