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 object-fit属性
Jul 27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python输入二维数组方法
2018/04/13 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python3.6数独问题的解决
2019/01/21 Python
python面试题小结附答案实例代码
2019/04/11 Python
python占位符输入方式实例
2019/05/27 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python解析多层json操作示例
2019/12/30 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python实现三种随机请求头方式
2021/01/05 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
工程专业应届生求职信
2014/02/19 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
结婚典礼主持词
2015/06/29 职场文书
爱国主题班会教案
2015/08/14 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript