<!DOCTYPE html>
<html charset="utf-8">
<head>
<title>时钟</title>
<style>
body{background:#42426F;}
#c1{background:white;}
span{color:white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
function toDraw(){
var x = 200;
var y = 200;
var r = 150;

oGC.clearRect(0,0,oC.width,oC.height);
//获取时间
var oDate = new Date();
var oHours = oDate.getHours();
var oMin = oDate.getMinutes();
var oSen = oDate.getSeconds();

var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
var oMinValue = (-90 + oMin*6) * Math.PI/180;
var oSenValue = (-90 + oSen*6) * Math.PI/180;
var osen2Value = oSenValue+Math.PI;

oGC.beginPath();
for(var i = 0; i < 60; i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

}
oGC.closePath();
oGC.stroke();

oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();

oGC.lineWidth=3;
oGC.beginPath();
for(var i = 0; i < 12; i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

}
oGC.closePath();
oGC.stroke();

oGC.fillStyle = 'white';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);
oGC.closePath();
oGC.fill();
//时针
oGC.lineWidth = 5;

oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);
oGC.closePath();
oGC.stroke();
//分针
oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*15/20,oMinValue,oMinValue,false);
oGC.closePath();
oGC.stroke();
//秒针
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*17/20,oSenValue,oSenValue,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*5/20,osen2Value,osen2Value,false);
oGC.closePath();
oGC.stroke();

oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*1/20,0,2*Math.PI,false);
oGC.fillStyle='black';
oGC.closePath();
oGC.fill();

}
setInterval(toDraw,1000);
toDraw();
};
</script>
</head>
<body>
<canvas id="c1" width="500" height="500">
<span>不支持canvas浏览器</span>
</canvas><!--默认宽300，高150-->
</body>
</html>

时钟.html的更多相关文章

  1. [转] STM32各种时钟的区别

    [原创]:http://m.oschina.net/blog/129357 我在原创的基础又从另一位博主处引用了一些内容. 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是 ...

  2. [转载]:STM32为什么必须先配置时钟再配置GPIO

    转载来源 :http://blog.csdn.net/fushiqianxun/article/details/7926442 [原创]:我来添两句,就是很多同学(包括我)之前搞低端单片机,到了stm ...

  3. 理解Java对象的交互：时钟显示程序

    实现: 结构: 对象:时钟  - 对象:小时                 - 对象:分钟 小时和分钟具有相同属性(值,上限),可以用一个类Display来定义这两个对象: 但是两者之间又具有联系( ...

  4. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  5. 浅谈时钟的生成(js手写代码)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  6. Linux(Unix)时钟同步ntpd服务配置方法

    http://xu20cn.blog.51cto.com/274020/69689 假定时钟服务器IP地址为:192.168.0.1 服务器端配置: 1:置/etc/ntp.conf文件内容为: se ...

  7. S5PV210_时钟系统

    1.S5PV210的时钟获得:外部晶振+内部时钟发生器+内部PLL产生高频时钟+内部分频器分频 S5PV210外部有4个W晶振接口,可以根据需要来决定在哪里接晶振.接了晶振之后上电相应的模块就能产生振 ...

  8. Canvas绘制时钟

    ①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height ...

  9. AM335x kernel4.4.12 LCD 时钟翻转设置记录

    TI AM335x kernel 4.4.12 LCD display 时钟翻转记录 因为公司硬件上已经确定LCD 转LVDS 转换芯片上确认以上升沿时钟为基准,所以只能在软件上调整相关东西. 入口在 ...

  10. CSS3简易表盘时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ASP.NET找不到类型或命名空间名称怎么办

    如图所示,运行之后提示找不到类型或空间名称,右击有波浪线的代码,选择解析,using XXX   随后自动补上了程序集引用

  2. .NET破解之PDF编辑器

    本教程只能用于学习研究,不可进行任何商业用途.如有使用,请购买正版,尊重他人劳动成果和知识产权! 第一效果团队(1XG Team)组建于2004年,并长期致力于WINDOWS平台应用软件开发,产品主要 ...

  3. java.lang.IllegalArgumentException: taglib definition not consistent with specification version

    web.xml报错 taglib标签错误,3.0要用jsp-config <jsp-config>    <taglib>        <taglib-uri>& ...

  4. MQTT---HiveMQ源代码具体解释(十八)Cluster-kryo与Serializer

    源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 既然是Cluster,node之间肯定是须要交互的,那么肯定是须要序列化和反序列化.Hi ...

  5. Android API Guides---Tasks and Back Stack

    一个应用程序通常包括多个活动.每一个活动应环绕行动的用户能够运行,而且能够启动其它活动的特定种类进行设计.比如,电子邮件应用程序可能具有一个活动,以显示新的消息的列表.当用户选择一个信息.一个新的活动 ...

  6. Learn X in Y minutes Where X=c++

    http://learnxinyminutes.com/docs/c++/ C++ is a systems programming language that, according to its i ...

  7. 解决 android sdk 下载慢

    1. 配置host: 74.125.237.1       dl-ssl.google.com  2.设置强制使用http连接

  8. iDempiere VS World

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ 第四篇 iDempiere VS World 接下来就接着第一篇,再说一说iDempei ...

  9. JavaScript常用語句

    1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:    document->html->(head,body)4 ...

  10. SDK Manager 闪退的解决方式

    打开电脑的执行  也就是win+R键    然后在命令行里面打上android即可了