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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 HTML / CSS
css3应用示例:新增的选择器
Mar 16 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python函数基本使用原理详解
2020/03/19 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
亲属关系公证书
2014/04/08 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
电影建党伟业观后感
2015/06/01 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript