结果图：

代码如下：

<!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. sh脚本异常,binsh^M bad interpreter No such file or directory

    错误 在Linux中执行.sh脚本,出现如下异常 /bin/sh^M: bad interpreter: No such file or directory 原因 在windows系统中编辑的.sh文 ...

  2. click和blur事件冲突解决方案

    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...

  3. 点评阿里JAVA手册之异常日志（异常处理 日志规约 ）

    下载原版阿里JAVA开发手册  [阿里巴巴Java开发手册v1.2.0] 本文主要是对照阿里开发手册,注释自己在工作中运用情况. 本文内容:异常处理 日志规约 本文难度系数为一星(★) 本文为第三篇 ...

  4. 记一次利用AutoMapper优化项目中数据层到业务层的数据传递过程。

    目前项目中获取到DataSet数据后用下面这种方式复制数据. List<AgreementDoc> list = new List<AgreementDoc>(); ].Row ...

  5. Java对【JSON数据的解析】--Gson解析法

    Gson和fastjson分别为谷歌和阿里巴巴对JSON数据进行处理封装的jar包 两者异同点: 相同点:都是根据JSON数据创建相应的类 不同点: 1.调用方式区别 谷歌:方法都是非静态的,需要先创 ...

  6. Python一键升级所有 模块/package

    import os,time allPackage=os.popen('pip list') allPackage=allPackage.read() allPackage=allPackage.sp ...

  7. JQuery--Ajax 异步操作 动态添加节点 (新人试水，求支持)

    异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 s ...

  8. Gradle入门学习---认识buildeTypes和dependencies

    Gradle是Android Studio默认的构建工具,如果是基本的APP开发,不会涉及到Gradle太多内容,毕竟它的诞生就不是专为Android服务的. 日常开发需要涉及到使用Gradle的场景 ...

  9. java基础（三章）

    java基础(三章) 一.基本if结构 1.流程图 l  输入输出 l  判断和分支 l  流程线 1.1              简单的if条件判断 if(表达式){            //表 ...

  10. 安卓餐厅点餐系统---针对浩然android工作室的一个小白的分析

    昨天刚把浩然android工作室的下载下来了,为了研究下点餐系统的架构,更好的完成手中的项目,便写出一个分析报告(小白的分析,忘见谅!) 本项目app主要用于餐厅无线订餐使用,功能突出餐厅的订餐需求, ...