<!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. Android小技术知识（多用于面试）

    Android Dev Doc Android 开发 多使用内部类 使用方便且效率高 UI方面的知识 一.在编写layout的xml文件时,一定要仔细!如果在报错的时候,如何解决? 解决:将xml仔细 ...

  2. 网站banner图片制作（简易版）

    1.新建图层 根据baner需求,新建图层尺寸: 2.将图片拖进图层 按住shift对图片进行等比例缩放,将等比例缩放后的图片平铺到图层上. 3.添加文字 设置字体以及字体颜色 4.添加描边 选择文字 ...

  3. JavaScript操作符

    一元操作符 只能操作一个值的操作符叫做一元操作符. 递增和递减操作符 递增和递减操作符遵循下列规则:         在应用于一个包含有效数字字符的字符串时,先将其转换为数字值,再执行加减 1 的操作 ...

  4. windows vbs启动多个应用程序并使程序最小化（显示桌面）

      windows vbs启动多个应用程序并使程序最小化(显示桌面) CreationTime--2018年7月26日11点18分 Author:Marydon 1.应用场景 每天开机后,都需要打开平 ...

  5. laravel-v5.1数据库连接文件是.env文件

  6. 转 Android Activity之间动画完整版详解

    标签:Android Activity动画详解 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://mzh3344258.blog.5 ...

  7. mybatis 特殊符号转义和模糊查询和批量插入

    1 xml文件特殊符号转义 <          < >          > <>   <> &      & &apos; ...

  8. mysql date and time type ---- mysql 时间&日期 类型详解

    mysql 中支持用多种方式来表示时间与日期 一.mysql 中能表示时间与日期的数据类型: 1.表示年 ) -- 最好不要用这个数据类型.对于年份的取值中有[1901 --> 2155] + ...

  9. mysql 字面值

    mysql 数据库中实现了许多的数据类型.通常我们用的最多的是在建表的时候指定列的数据类型 如:brithday date default '2000-01-01' 那么我们如何给字面值(直接量)指定 ...

  10. freeswitch 把SIP注册信息数据库从SQLITE 改为MYSQL的方法

    实际线上应用中,在线注册人数超过4000 ,SQLITE就吃不消了,容易造成锁表,考虑转入MYSQL,查了下官网 超过转入了MYSQL. https://wiki.freeswitch.org/wik ...