<!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. Number Sequence_hdu_1005(规律)

    9329854 2013-10-13 14:36:41 Accepted 1005 171MS 5072K 654 B Java zhangyi http://acm.hdu.edu.cn/showp ...

  2. SLAX初体验

    Slax是一个便捷.便携的Linux操作系统.它的界面既充满时尚感,又可基于不同模块的功能运作.它的界面富有时尚感,并集成了不同的模块的界面.尽 管它的容量十分娇小,Slax依然预载了不少日常应用的软 ...

  3. HTML5 本地存储形式

    1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 we ...

  4. Unity3D For Android 开发教程

    原地址:http://game.ceeger.com/Unity/Doc/2011/Unity3D_For_Android.html 我自认为抵挡诱惑的能力还是很强大的,关键的时候还能把持住自己.今天 ...

  5. tarjan+缩点+强连通定理

    C - Network of Schools Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I ...

  6. 【Oracle】Windows定时计划每天备份数据库

    脚本 OracleBakEveryDay.bat @echo off echo ================================================ echo Window ...

  7. html单行注释符号

    html单行注释符号 2014-10-02 15:33 来源: IT技术学习网原创 阅读: 589   说到html的单行注释,比较特别,html中确确实实没有专门的单行注释符号.不管是//还是#,在 ...

  8. oracle中如何设置主键并且让其自动增长

    由于oracle中是没有自动增长的的,需要自己去进行写触发器等方式去进行设置: 找了一下他人写的,有两种方法可以设置主键,一种是自增长主键,另一种就是生成唯一序列. 一.自增长主键 我创建一个用户的信 ...

  9. 基于SSM + Redis的Shiro权限管理项目

    概述 本教程结合SSM(SpringMVC + Mybatis)框架讲解Shiro,讲解的内容有自定义shiro拦截器,Shiro Freemarker标签,Shiro JSP标签,权限控制讲解. 详 ...

  10. 携程实时大数据平台演进：1/3 Storm应用已迁到JStorm

    携程大数据平台负责人张翼分享携程的实时大数据平台的迭代,按照时间线介绍采用的技术以及踩过的坑.携程最初基于稳定和成熟度选择了Storm+Kafka,解决了数据共享.资源控制.监控告警.依赖管理等问题之 ...