结果图：

代码如下：

<!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. Java解析word文档

    背景 在互联网教育行业,做内容相关的项目经常碰到的一个问题就是如何解析word文档. 因为系统如果无法智能的解析word,那么就只能通过其他方式手动录入word内容,效率低下,而且人工成本和录入出错率 ...

  2. Lesser known dplyr tricks

    In this blog post I share some lesser-known (at least I believe they are) tricks that use mainly fun ...

  3. kafka 0.10.2 消息生产者(producer)

    package cn.xiaojf.kafka.producer; import org.apache.kafka.clients.producer.*; import org.apache.kafk ...

  4. centos 修改主机映射

    [root@m1 ~]# vi /etc/hosts

  5. 01-.Net编程机制

    .NetFarmwark特点: 多平台:该系统可以在广泛的计算机上运行,包括从服务器.桌面机到PDA和移动电话. 行业标准:该系统使用行业标准的通信协议,比如XML.HTTP.SOAP和WSDL. 安 ...

  6. linux命令11

    tar命令的使用 tar文件是把几个文件的(或)目录集合在一个文件夹里,是创建备份和归档的最佳工具. [root@localhost ~]# tar --help用法: tar [选项...] [FI ...

  7. 微信小程序 获取OpenId

    微信小程序 官方API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 首先 以下代码是 页面加载请求用户 是否同意授权 同意之后 用code 访问 微信 ...

  8. QT环境的搭建

    说到QT大家一定要先了解到底什么是QT,我们通常说的QT是包括:Qt-creactor的集成开发环境(IDE)和Qt的开发工具包(SDK),而Qt-creactor就相当于我们的visio studi ...

  9. 每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解

    本篇主要介绍MongoDB可视化操作以及shell使用及命令,备份恢复.数据导入导出. MongoVUE安装和简单使用 使用mongo.exe 管理数据库虽然可行,功能也挺强大,但每次都要敲命令,即繁 ...

  10. HTML5 客户端存储数据的两种方式

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...