SVG实现时钟效果
程序员文章站
2023-10-29 23:04:34
本文实例为大家分享了svg实现时钟效果的具体代码，供大家参考，具体内容如下
<...
本文实例为大家分享了svg实现时钟效果的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
* {
margin: 0;
}
</style>
</head>
<body>
<svg width="400" height="400">
<title>svg analog clock</title>
<circle id="face" cx="125" cy="125" r="100"
style="fill: #f1f1f1; stroke: #000;"></circle>
<g id="ticks" transform="translate(125, 125)">
<path id="triangle" d="m95 0 l 100 -5 l 100 5 z"
transform="rotate(360)"></path>
</g>
<g id="hands">
<path id="hour" d="m 125 125 v 75"
style="fill: none; stroke: black; stroke-width: 6"
transform="rotate(0)"></path>
<path id="minute" d="m 125 125 v 50"
style="fill: none; stroke: black; stroke-width: 4"
transform="rotate(0)"></path>
<path id="second" d="m 125 125 q 100 100 125 80 t 125 40 v 30"
style="fill: none; stroke: #f00; stroke-width: 2"
transform="rotate(0)"></path>
</g>
<g id="knob" transform="translate(125, 125)">
<circle cx="0" cy="0" r="6" style="fill: #333;"></circle>
</g>
</svg>
<script>
var svgns = "http://www.w3.org/2000/svg";
var face = document.getelementbyid("face"),
ticks = document.getelementbyid("ticks"),
triangle = document.getelementbyid("triangle"),
txt = document.getelementbyid("txt");
for (var i = 0; i < 11; i++) {
var temp_triangle = triangle.clonenode(true);
var angle = i * 30 + 30;
temp_triangle.setattribute("transform", "rotate(" + angle + ")");
ticks.appendchild(temp_triangle);
ticks.setattribute("transform", "translate(125, 125), rotate(-90)");
}
var hourhand = document.getelementbyid("hour"),
minutehand = document.getelementbyid("minute"),
secondhand = document.getelementbyid("second");
var hourtransform, minutetransform, secondtransform;
var secper12hours = 60 * 60 * 12,
secperhour = 60 * 60,
secperminute = 60;
(function init() {
hourtransform = hourhand.transform.baseval.getitem(0);
minutetransform = minutehand.transform.baseval.getitem(0);
secondtransform = secondhand.transform.baseval.getitem(0);
updateclock();
})()
function updateclock() {
var date = new date();
var sec = date.getmilliseconds() / 1000 +
date.getseconds() +
date.getminutes() * 60 +
date.gethours() * 60 * 60;
var hourangle = (sec % secper12hours) * 360 / secper12hours,
minuteangle = (sec % secperhour) * 360 / secperhour,
secondangle = (sec % secperminute) * 360 / secperminute;
hourtransform.setrotate(hourangle, 125, 125);
minutetransform.setrotate(minuteangle, 125, 125);
secondtransform.setrotate(secondangle, 125, 125);
window.requestanimationframe(updateclock);
}
</script>
</body>
</html>
浏览器需要支持：requestanimationframe
有关requestanimationframe的相关知识请自行查阅
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 揭武媚娘活到81岁的养生秘诀