结果图：

代码如下：

<!DOCTYPE html>

<html>

<head>

	<title>动态时钟</title>

</head>

<body onload="updateTime();">

<script type="text/javascript">

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 type="text/css">

#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>

<!-- 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="SourceGrahic"/>

				<feMergeNode in="shadow"/>

			</feMerge>

		</filter>

	</defs>

	<circle id="face" cx="50" cy="50" r="45"/> 	<!-- 钟面 -->

	<g id="ticks">

		<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.970" 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>

　　

JavaScript+svg绘制的一个动态时钟的更多相关文章

  1. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  2. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  3. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  4. 【应用】SVG动态 时钟

    没有做秒针,只做了分针和时针,5分钟以后来看应该可以看到效果╮(╯-╰)╭ <!DOCTYPE html> <html> <head> <title>& ...

  5. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  6. iOS 绘制一个表盘时钟，秒针效果可以“扫秒/游走”

    最近自己 也尝试写了一个表盘时钟,初衷源于等车时候一个老奶奶问时间,我打开手机,时间数字对我来说相对敏感,但是老奶奶是看不清的,我想识别 还是看表盘 老远 看时针分针角度就可以识别当前时间. 于是我想 ...

  7. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  8. python+pygame制作一个可自定义的动态时钟和详解

    1.效果图 2.完整代码 #第1步:导出模块 import sys, random, math, pygame from pygame.locals import * from datetime im ...

  9. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

随机推荐

  1. 用NIO实现http协议

    先来看一下本篇博文的目录: 一:简介Nio 二:Nio的好处 三:关于http协议 四:代码实现 五:总结 一:简介Nio 我们都知道io流,那么NIO是什么呢?本篇博文将会带你一探NIO,NIO的全 ...

  2. JVM-1.编译

    目录 一.编译器概述 二.编译器组成 三.示例 四.深入理解JVM中的编译器 五.语法糖 六.补充     一.编译器概述 1.编译器实质 编译器的实质是将一种语言规范转化为另一种语言规范:由人容易理 ...

  3. springmvc 添加@ResponseBody

    1.添加ResponseBody之后的话 返回字符串的时候 就是一个字符串. @RequestMapping(value = "/{bookId}/detail.do",metho ...

  4. cpp(第二章)

    1. 函数参数空着,代表void 2. 换行符 endl(确保程序继续运行前刷新输出,将其立即显示在屏幕上)|| '\n' (不能保证,这意味着有些系统中,有时可能输入信息后才会出现) 3.小谈cou ...

  5. Spring学习（15）--- 基于Java类的配置Bean 之 @Bean & @Scope 注解

    默认@Bean是单例的,但可以使用@Scope注解来覆盖此如下: @Configuration public class MyConfiguration { @Bean @Scope("pr ...

  6. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  7. 没有main方法真的不能执行代码了吗？

    今天看北大慕课遇到一段代码,于是下载下来跑了一下,奇葩的是,没有main方法既没报错,还出了结果. 下面贴出代码: class InitialTest { public static void mai ...

  8. 使用dom4j讲xml字符串递归遍历成Map

    package test; import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import j ...

  9. Akka（9）： 分布式运算：Remoting-远程构建式

    上篇我们讨论了Akka-Remoting.我们说Akka-Remoting是一种点对点的通讯方式,能使两个不同JVM上Akka-ActorSystem上的两个Actor之间可以相互沟通.Akka-Re ...

  10. 一些java方面面试题，没事做做看看（带答案）

    1. Switch能否用string做参数? a.在?Java? <http://lib.csdn.net/base/java>7 之前, switch 只能支持byte,short,ch ...