通过javascript+svg实现实时时钟

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_34315189

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lktec/p/3140127.html

版权

通过javascript+svg实现实时时钟，效果如图：

下面是页面代码
<html>
<head>
	<title>时钟</title>
	<style type="text/css">
		svg {
	height: 200px;
	width: 200px;
	font-family: "Comic Sans MS", cursive;
}
	</style>
</head>
<body>
	<svg id="svg"></svg>
	<script>
		(function clock(svg) {
			var svg = document.getElementById(svg);
			var weekday = ["日", "一", "二", "三", "四", "五", "六"];
			var r = svg.clientWidth / 2;
			var b = r / 50;
			r = r - b;
			var d = new Date();
			svg.appendChild(C("circle", { r: r, cx: r + b, cy: r + b, stroke: 'gray', 'stroke-width': b, fill: 'none' }));
			svg.appendChild(C("rect", { x: r - r / 5 + b, y: r + r * 2 / 4 + b, width: r * 2 / 5, height: r / 4, stroke: 'gray', 'stroke-width': b / 3, fill: "none" }));
			var cd = C("text", { x: r - r / 6, y: r + r * 2 / 3, fill: "blue", style: "font-size:" + (r / 10) + "px;" });
			cd.textContent = d.getDate() + " 周" + weekday[d.getDay()];
			svg.appendChild(cd);

			for (var i = 0; i < 60; i++) {
				var _b = !(i % 5) ? b : b / 2, _r = r - 2 * b;
				var x1 = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - b - _b) + r + b,
				    y1 = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - b - _b) + r + b,
				    x2 = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * _r + r + b,
				    y2 = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * _r + r + b;
				svg.appendChild(C("line", { x1: x1, x2: x2, y1: y1, y2: y2, stroke: 'black', 'stroke-width': _b }));
				if (!(i % 5)) {
					var x = Math.sin(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - 2 * b - r / 10) + r - b,
					y = Math.cos(Math.PI - 2 * Math.PI / 360 * i * 6) * (_r - 2 * b - r / 10) + r + 3 * b;
					var text = C("text", { x: x, y: y, fill: "blue", style: "font-size:" + (r / 10) + "px;" })
					text.textContent = (i / 5 + 11) % 12 + 1;
					svg.appendChild(text);
				}
			}
			var hour = C("line", { stroke: 'red', 'stroke-width': 3 * b / 2 }),
				minute = C("line", { stroke: 'green', 'stroke-width': b }),
				second = C("line", { stroke: 'blue', 'stroke-width': b / 2 });
			svg.appendChild(hour),
			svg.appendChild(C("circle", { r: 3 * b / 2, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'red' }))
			svg.appendChild(minute),
			svg.appendChild(C("circle", { r: b, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'green' }))
			svg.appendChild(second),
			svg.appendChild(C("circle", { r: b / 2, cx: r + b, cy: r + b, 'stroke-width': 0, fill: 'blue' }));
			R();
			setInterval(R, 1000);
			function R() {
				var h = new Date().getHours(),//get the current hour
				m = new Date().getMinutes(),   //get the current minute
				s = new Date().getSeconds();//get the current second
				var hr = h * 30 + (m / 2),
				mr = m * 6, //degrees to rotate the minute hand
				sr = s * 6;//for the rotation to reach 360 degrees
				A(hour, hr, -2*b, r / 2), A(minute, mr, -3*b, 2 * r / 3), A(second, sr, -4*b, r - 4 * b - r / 10);
			}
			function C(tagName, options) {
				options = options || {};
				var ns = document.createElementNS("http://www.w3.org/2000/svg", tagName);
				for (var key in options) ns.setAttribute(key, options[key]);
				return ns;
			}
			function A(svgLine, angelDeg, svgLeft, svgRight) {
				var x1 = Math.sin(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgLeft + r + b,
					y1 = Math.cos(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgLeft + r + b,
					x2 = Math.sin(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgRight + r + b,
					y2 = Math.cos(Math.PI - 2 * Math.PI / 360 * angelDeg) * svgRight + r + b;
				svgLine.setAttribute("x1", x1),
				svgLine.setAttribute("y1", y1),
				svgLine.setAttribute("x2", x2),
				svgLine.setAttribute("y2", y2);
			}
		})("svg");
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/lktec/p/3140127.html

weixin_34315189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过javascript+svg实现实时时钟

通过javascript+svg实现实时时钟，效果如图：下面是页面代码<html><head> <title>时钟</title> <style type="text/css"> svg { height: 200px; width: 200px; font-family: "Comic Sans...
复制链接

扫一扫