html5时钟实现代码


Posted in HTML / CSS onOctober 22, 2010

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
canvas{position:absolute;top:0px;left:0px;}
</style>
<title>时钟</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<canvas id="p_canvas" width="200" height="200"></canvas>
<script type="text/javascript">
//获取绘图对象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var p_canvas = document.getElementById('p_canvas');
var p_context = p_canvas.getContext('2d');

var height=200,width=200;
//画大圆
context.beginPath();
context.strokeStyle="#009999";
context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);
context.stroke();
context.closePath();
//画中间点
context.beginPath();
context.fillStyle="#000";
context.arc(width/2,height/2,3,0,Math.PI*2,true);
context.fill();
context.closePath();

//画小刻度
var angle = 0,radius = width/2 - 4;
for(var i=0;i<60;i++){
context.beginPath();
context.strokeStyle="#000";
//确认刻度的起始点
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
//这里是用来将刻度的另一点指向中心点,并给予正确的角度
//PI是180度,正确的角度就是 angle+180度,正好相反方向
var temp_angle = Math.PI +angle;
context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));
context.stroke();
context.closePath();
angle+=6/180*Math.PI;
}
//大刻度
angle = 0,radius = width/2 - 4;
context.textBaseline = 'middle';
context.textAlign = 'center';
context.lineWidth = 2;
for(var i=0;i<12;i++){
var num = i+3>12? i+3-12:i+3 ;
context.beginPath();
context.strokeStyle="#FFD700";
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
var temp_angle = Math.PI +angle;
context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));
context.stroke();
context.closePath();
//大刻度 文字
context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));
angle+=30/180*Math.PI;
}

function Pointer(){
var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];
function drwePointer(type,angle){
type = p_type[type];
angle = angle*Math.PI*2 - 90/180*Math.PI;
var length= type[1];
p_context.beginPath();
p_context.lineWidth = type[2];
p_context.strokeStyle = type[0];
p_context.moveTo(width/2,height/2);
p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle));
p_context.stroke();
p_context.closePath();

}
setInterval(function (){
p_context.clearRect(0,0,height,width);
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
h = h>12?h-12:h;
h = h+m/60;
h=h/12;
m=m/60;
s=s/60;
drwePointer(0,s);
drwePointer(1,m);
drwePointer(2,h);
},500);
}
var p = new Pointer();
</script>
</body>
</html>

HTML / CSS 相关文章推荐
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
html5 canvas 使用示例
Oct 22 #HTML / CSS
IE9下html5初试小刀
Sep 21 #HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 #HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 #HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 #HTML / CSS
html5 学习简单的拾色器
Sep 03 #HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
layui的select联动实现代码
2019/09/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
办公室文书岗位职责
2013/12/16 职场文书
安全生产承诺书范文
2014/05/22 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android