结果图：

代码如下：

<!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. javaScript-什么是变量?

    什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名 ...

  2. docker - win7下构建swarm nodes实现跨host的容器之间的通信

    前言 之前在Linux环境下尝试了swarm,通过将不同host以swarm nodes 的方式连接到一起(构建Overlay 子网),从而实现跨host的container通信. 今天我们就来说说如 ...

  3. 学习web前端怎样入门？初学者赶紧看过来！

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

  4. Day2 - Python基础2习题集

    1.购物车程序 product_list = [ (), (), (), (), (), (), ] shooping_list = [] salary = input("Input you ...

  5. nodejs实战：使用原生nodeJs模块实现静态文件及REST请求解析及响应（基于nodejs6.2.0版本，不使用express等webMVC框架 ）

    一.准备工作 1.安装nodejs 首先你需要安装nodeJs 那么nodejs官网:http://nodejs.cn/,下载相应版本,一步一步安装. 二.使用nodejs开发服务器后台应用 1.创建 ...

  6. 包装FTPWebRequest类

    上篇文章讨论了C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密.不过细心的朋友应该可以发现FTPWebRequest 每次都是新生成一个reques ...

  7. JavaScript设计模式_05_发布订阅模式

    发布-订阅模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都将得到通知.发布-订阅模式是使用比较广泛的一种模式,尤其是在异步编程中. /* * pre:发布-订阅 ...

  8. [codeforces113D]Museum

    D. Museum time limit per test: 2 seconds memory limit per test: 256 megabytes input: standard input ...

  9. [BZOJ1415]聪聪和可可

    Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行,每 ...

  10. angular路由最基本的实例---简单易懂

    <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...