【应用】SVG动态 时钟
2024-09-17 03:18:18
没有做秒针，只做了分针和时针，5分钟以后来看应该可以看到效果╮(╯-╰)╭
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function updateTime(){ //更新SVG时钟来显示当前时间
var now=new Date(); //当前时间
var min=now.getMinutes(); //分钟
var hour=(now.getHours()%12)+min/60; //转换成可以在时钟上表示的时间
var minangle=min*6; //每6°表示一分钟
var hourangle=hour*30; //每30°表示一小时 //获取表示时钟时针和分针的SVG元素 var minhand=document.getElementById("minutehand");
var hourhand=document.getElementById("hourhand"); //设置元素的SVG属性，将它们移动到钟面上
minhand.setAttribute("transform","rotate("+minangle+",50,50)");
hourhand.setAttribute("transform","rotate("+hourangle+",50,50)");
//每一分钟更新下时钟显示时间
setTimeout(updateTime,60000);
}
</script>
<style>
/*下面定义的所有CSS样式后悔作用在SVG元素上*/
#clock{ /*通用语时钟的全局样式*/
stroke:black; /*黑线*/
stroke-linecap:round; /*圆角*/
fill:#eef; /*以浅蓝灰色作为背景*/
}
#face{ stroke:width:3px; } /*时钟的外边框*/
#ticks{ stroke:width:2; } /*标记每个小时的线段*/
#hourhand{stroke:width:5px;} /*相对较粗的时针*/
#minutehand{stroke:width:3px;}/*相对较细的分针*/
#numbers{ /*如何绘制数字*/
font-family: sans-serif;font-size: 7pt;font-weight: bold;
text-anchor:middle;stroke:none;fill:black;
}
</style>
</head>
<body onload="updateTime()">
<!--vieBox是坐标系，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>
<!--初始绘制成竖直额度指针，之后通过javascript代码来做旋转-->
<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"/>
</g>
</svg>
</body>
</html>
效果图如下：
最新文章
- python开发编译器
- jemalloc在linux上从安装到使用
- [Sass]声明变量
- 代码与图详解性能之Python集合类型(list tuple dict set generator)
- 简析android消息模型
- ubuntu手贱改了sudoers权限之后的恢复
- 翻译：深入 AngularUI Router
- Java中中文拼音的排序问题
- guake默认快捷键
- yii2源码学习笔记(十六）
- Hadoop获得先进的步步高（四）-试Hadoop
- 关联分析：FP-Growth算法
- Smarty基础用法
- UWP：可滚动的PivotHeader
- Java-IO之CharArrayWriter（字符数组输出流）
- Git开发分支使用与管理规范
- 【不遮遮掩掩】Github上传本地代码以及常见问题解决方案
- RSA加密和解密工具类
- CNN Mnist
- poj-1151矩形面积并-线段树