使用svg实现动态时钟效果
更新时间：2018年07月17日 11:10:05 作者：商域无疆
这篇文章主要为大家详细介绍了如何使用svg实现动态时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个使用svg做的动态时钟，供大家参考，具体内容如下
怎么样很酷吧，以下是源码：
<!DOCTYPE html>
<html>
<title>SVG clock</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" >
<!-- <link rel="stylesheet" type="text/css" href="canvas.css" rel="external nofollow" media="all" />-->
<style type="text/css">
#clock {
stroke: #adcd3c;
stroke-linecap: round;
fill: #f2fddb;
}
#face {
stroke-width: 3px;
}
#ticks {
stroke-width: 2px;
}
#hands line {
stroke-linejoin: bevel;
}
#hourhand {
stroke-width: 4px;
}
#minutehand {
stroke-width: 3px;
}
#numbers {
font-size: 16px;
text-anchor: middle;
stroke: none;
fill: #92b0dd;
}
</style>
<script type="text/javascript">
function updateTime() {
var now = new Date();
var second = now.getSeconds();
var min = now.getMinutes();
var hour = (now.getHours() % 12) + min / 60;
var secondangle = second * 6; //6 degrees for every minute
var minangle = min * 6; //6 degrees for every minute
var hourangle = hour * 30; //30 degrees for every hour
var minhand = document.getElementById('minutehand');
var hourhand = document.getElementById('hourhand');
var secondhand = document.getElementById('secondhand');
var shadhand = document.getElementById("shadow");
var clocks = document.getElementById("clock");
if(second%2==0){
//alert(clocks);
clocks.style.stroke="#adcd3c";
}else{
//alert(secondangle);
clocks.style.stroke="#ad223c";
}
minhand.setAttribute('transform', 'rotate(' + minangle + ', 50, 50)');
hourhand.setAttribute('transform', 'rotate(' + hourangle + ', 50, 50)');
secondhand.setAttribute('transform', 'rotate(' + secondangle + ', 50, 50)');
for (var i = shadhand.childElementCount - 1; i >= 0; i--) {
var chr = shadhand.children[i];
switch (chr.tagName)
{
case "feGaussianBlur":
/*if(secondangle/2)==1){
chr.setAttribute(dx=-1)
}else{
chr.setAttribute(dx=1)
}
alert(chr.tagName);*/
break;
case "feOffset":
if(second%2==0){
//alert(secondangle);
chr.setAttribute("dx","-3");
}else{
//alert(secondangle);
chr.setAttribute("dx","3");
}
//alert(chr.tagName);
break;
case "feMerge":
/*for (var i = 0; i < chr.childElementCount -1; i++) {
chr.children[i].
};*/
//alert(chr.tagName);
break;
default:
alert("could not found the Attribute");
}
};
setTimeout(updateTime, 1000); //update time for every second
}
</script>
<body onload="updateTime()">
<svg id="clock" viewBox="0 0 100 100" width="500" height="500">
<defs>
<!-- define an filter use to add shadow of some element -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feOffset in="blur" dx="-1" dy="1" result="shadow" lighting-color = "#adcd3c"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="shadow" />
</feMerge>
</filter>
</defs>
<!-- clock face -->
<circle id="face" cx="50" cy="50" r="45" />
<!-- mark time lines -->
<g id="ticks">
<line x1="50.00" 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.90" 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.90" 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.00" x2="30.00" y2="15.36" />
</g>
<!-- mark some important numbers -->
<g id="numbers">
<text x="50" y="20">12</text>
<text x="85" y="55">3</text>
<text x="50" y="88">6</text>
<text x="15" y="55">9</text>
</g>
<!-- show hands -->
<g id="hands" filter="url(#shadow)">
<line id="hourhand" x1="50" y1="50" x2="50" y2="24" />
<line id="minutehand" x1="50" y1="50" x2="50" y2="20" />
<line id="secondhand" x1="50" y1="50" x2="50" y2="16" />
</g>
</svg>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
将字符串转换成gb2312或者utf-8编码的参数(js版)
直接在url中传递中文参数时，读到的中文都是乱码，那么我们应该怎么将这些参数转换呢，接下来与大家分享下将字符串转换成utf-8或者gb2312编码的参数的技巧2013-04-04
这篇文章主要介绍了关于编写性能高效的javascript事件的技术 ,需要的朋友可以参考下2014-11-11
最近在看javascript设计模式的书籍《pro javascript design pattrens》，觉得很不错，可以提高自己对js oo的理解，也可能帮助自己更好的理解别人写的js library，提高自己js的水平2012-07-07
这篇文章主要为大家详细介绍了javascript微信支付的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
elementui更改el-dialog关闭按钮的图标d的示例代码
这篇文章主要介绍了elementui更改el-dialog关闭按钮的图标，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了JavaScript实现页面动态验证码的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
uniapp实现app检查更新与升级详解(uni-upgrade-center)
UniApp是一个跨平台的开发框架,可以同时开发iOS和Android应用,下面这篇文章主要给大家介绍了关于uniapp实现app检查更新与升级(uni-upgrade-center)的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ECharts具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了AngularJS+Bootstrap实现多文件上传与管理，对上传文件进行加载与删除操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
如何需要进行动态的导入js文件，那么下面的方法或许可以帮助到大家2014-01-01
最新评论