<!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. Discuz常见小问题-如何快速清除帖子

    看别人发的垃圾帖,然后鼠标移到用户名上面,在弹出菜单中点击禁止用户   设置禁止访问-全选所有,删除   然后短期内无法看到效果,帖子还在,你点进去会报错说指定的主题不存在   过三十分钟再刷新页面, ...

  2. CSS基础和布局复习

    table布局 div布局优势   浏览器支持完善   表现和结构分离   样式设计控制功能强大   可以继承,层叠处理 Transitional // 松散过度型 Strict //严格型 Fram ...

  3. ArcGIS Add-In调试无法重新生成

    在调试ArcGIS Add-In时,出现错误:无法注册程序集"……\Projects\ArcGISAddIn\ArcGISAddIn\bin\Debug\ArcGISAddIn.dll&qu ...

  4. UITextView 添加 pleaceholder

    UITextView 默认没有 pleaceholder属性: 我们可以通过多种方式添加 在UITextView的代理方法中写 - (void)textViewDidBeginEditing:(UIT ...

  5. Java打包生成exe(使用exe4j和inno setup)

    Java打包生成exe 生成jar 先使用eclipse生成可执行的jar[可执行的jar包含内容更全面,包括指定主类的.mf] Exe4j的使用 一定要可执行jar进行打包. Project typ ...

  6. Python break

    break退出循环 用 for 循环或者 while 循环时,如果要在循环体内直接退出循环,可以使用 break 语句. 比如计算1至100的整数和,我们用while来实现: sum = 0 x = ...

  7. C# 通过form表单下载文本文件

    public void DownLoadConfigFile(string name) { //获取文件字符串内容 var data = _service.ReadFileStr(_configure ...

  8. 不经意的小错误——onclick和click的区别

    可能注意不到的错误,编写jquery时发现没有自己想要的效果,结果通过代码比对软件才发现原来将click写成了onclick,虽然看着差不多,但意义却不相同,简单区别如下: $().click() 是 ...

  9. python文件输入和输出

    1.1文件对象 文件只是连续的字节序列.数据的传输经常会用到字节流,无论字节流是由单个字节还是大块数据组成.1.2文件内建函数open()和file() 内建函数open()的基本语法是: file_ ...

  10. python 訪问webservice

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...