js+SVG实现动态时钟效果
本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码，供大家参考，具体内容如下
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title>Analog Clock</title>
<script>
function updateTime() {
var now = new Date(); // 当前时间
var min = now.getMinutes(); // 分钟
var hour = (now.getHours() % 12) + min/60; // 转行成可以在时钟上表示的时间
var seconds = now.getSeconds(); //秒钟
var minangle = min*6; // 6度表示一分钟
var hourangle = hour*30; // 30 表示一小时
var secrangel = seconds * 6; // 6度表示一秒钟
// 获取表示时钟时针的SVG元素
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
var secondhand = document.getElementById("secondhand");
// 设置这些元素的SVG属性，将它们移动到钟面上
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
secondhand.setAttribute("transform", "rotate(" + secrangel + ",50,50)");
// 每秒钟更新下时钟显示时间
setTimeout(updateTime, 1000);
}
</script>
<style>
#clock {
stroke: black;
stroke-linecap: round;
fill: #eef;
}
#face { stroke-width: 2px;}
#ticks { stroke-width: 2px; }
#hourhand {stroke-width: 3px;}
#minutehand {stroke-width: 2px;}
#secondhand{stroke-width: 1px;}
#numbers {
font-family: sans-serif; font-size: 7pt; font-weight: bold;
text-anchor: middle; stroke: none; fill: black;
}
</style>
</head>
<body onload="updateTime()">
<!-- viewBox是坐标系，width和height是指屏幕大小 -->
<svg id="clock" viewBox="0 0 100 100" width="500" height="500">
<defs> <!-- 定义下拉阴影的滤镜 -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<feOffset in="blur" dx="1" dy="1" result="shadow" />
<feMerge>
<feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/>
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/> <!-- 钟缅 -->
<g id="ticks"> <!-- 12小时的刻度 -->
<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
</g>
<g id="numbers"> <!-- 标记重要的几个刻度值-->
<text x="50" y="18">12</text><text x="85" y="53">3</text>
<text x="50" y="88">6</text><text x="15" y="53">9</text>
</g>
<!-- 初始绘制成竖直的指针，之后通过js来做旋转 -->
<g id="hands" filter="url(#shadow)"> <!-- 给指针添加阴影 -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="25"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="18"/>
<line id="secondhand" x1="50" y1="50" x2="50" y2="11"/>
</g>
</svg>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现动态时钟的启动和停止
javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态时钟的启动和停止</title> </head> <body background="img/2.jpg" style="background-re
-
Javascript实现动态时钟效果
本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }
-
JS+Canvas绘制动态时钟效果
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #
-
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
-
js+SVG实现动态时钟效果
本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.
-
使用svg实现动态时钟效果
一个使用svg做的动态时钟,供大家参考,具体内容如下 怎么样很酷吧,以下是源码: <!DOCTYPE html> <html> <title>SVG clock</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="
-
JS+Canvas实现动态时钟效果
基于Canvas制作的动态时钟demo,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></script> <script
-
JS 实现倒计时数字时钟效果【附实例代码】
这篇文章主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
-
JS+CSS实现动态时钟
本文实例为大家分享了JS+CSS实现动态时钟的具体代码,供大家参考,具体内容如下 知识点总结: document.querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. HTML
-
使用JS显示倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
JS+H5 Canvas实现时钟效果
用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下 效果图: 先看html代码: <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head>