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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 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和html混合代码的小技巧(分享)
2016/11/03 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python简单实现AES加密和解密
2019/03/28 Python
python tkinter组件使用详解
2019/09/16 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
澳大利亚商务邀请函
2014/01/17 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技