结果图：

代码如下：

<!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. 关于QT中的音频通信问题

    今天给大家讲说一个新的东西,使用QT实现音频通信的功能,挺起来是不是很高大上啊,哈哈,实际上我们只是使用一些接口做一些简单的工作而已,并不是让你写一个传输协议和采集音频信息,好了,那我们就来说一说关于 ...

  2. 从零开始——PowerShell应用入门（全例子入门讲解）

    学习一门技术,不止要会,还要善用,例子就是带你快速入门的最佳利器.本文就是要用例子,不,大量的例子来带你走进PowerShell应用世界. 本文主要介绍一些PowerShell入门的基础知识,对技术小 ...

  3. Python中Swithch Case语法实现

    而python本身没有switch语句,解决方法有以下3种:A.使用dictionaryvalues = { value1: do_some_stuff1, value2: do_some_stuff ...

  4. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  5. DDD理论学习系列（6）-- 实体

    DDD理论学习系列--案例及目录 1.引言 实体对应的英语单词为Entity.提到实体,你可能立马就想到了代码中定义的实体类.在使用一些ORM框架时,比如Entity Framework,实体作为直接 ...

  6. http服务器开发笔记（一）——先跑起来

    做了很多年的web相关开发,从来也没有系统的学习http协议,最近正好工作不怎么忙,准备系统的学习一下. 接下来准备自己写一小型的http服务器来学习,因为现在对JavaScript比较熟悉,所以决定 ...

  7. 编码的秘密（python版）

    编码(python版) 最近在学习python的过程中,被不同的编码搞得有点晕,于是看了前人的留下的文档,加上自己的理解,准备写下来,分享给正在为编码苦苦了挣扎的你. 编码的概念 编码就是将信息从一种 ...

  8. nginx四层负载均衡配置

    nginx四层负载均衡配置代理Mysql集群 环境如下: ip 192.168.6.203 Nginx ip 192.168.6.*(多台) Mysql 步骤一 查看Nginx是否安装stream模块 ...

  9. JS+PHP实现用户输入数字后取得最大的值并显示为第几个

    目的:分清JS PHP的区别,拓宽思维 分析 1.利用JS的prompt输入用户想要输入的值. 2.利用HTML表单的text标签将输入的值传递给PHP处理文件 3.PHP进行数值判定,选出最大值和位 ...

  10. XML配置文件中写版本号.xsd和不写版本号的区别

    如果写版本号则默认从网上下载并指定最新版本,如果不写版本号则默认从本地下载并使用最新版本.