用HTML5的canvas写的时钟

自己瞎琢磨写的,以下为js代码
function draw(){
setInterval(Composite,1000);
}
function Composite(){
var canvas = document.getElementByIdx_x("canvas");
if(canvas==null)
return false;
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
context.save();
var myDate = new Date();
var hour = myDate.getHours()>=12?myDate.getHours()-12:myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var year = myDate.getFullYear();   //获取完整的年份(4位,1970-????)
var month = myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1;      //获取当前月份(0-11,0代表1月)(要加1) 
var date = myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate();       //获取当前日(1-31)
var week = myDate.getDay();        // 获取当前星期X(0-6,0代表星期天)
switch(week){
case 0:week = "星期日";break;
case 1:week = "星期一";break;
case 2:week = "星期二";break;
case 3:week = "星期三";break;
case 4:week = "星期四";break;
case 5:week = "星期五";break;
case 6:week = "星期六";break;
}
var hour1 = myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();      //获取当前小时数(0-23)
var minute1 = myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();    // 获取当前分钟数(0-59)
var second1 = myDate.getSeconds()<10?"0"+myDate.getSeconds():myDate.getSeconds();    //获取当前秒数(0-59)   
var s = year+"年"+month+"月"+date+"日 "+week+hour1+":"+minute1+":"+second1;
document.getElementByIdx_x("tt").innerHTML = s;
//设置圆形
context.beginPath();
context.fill;
context.arc(150,150,100,0,Math.PI*2,false);
context.fill();
context.closePath();
//设置秒针
context.beginPath();
context.strokeStyle = "red";
context.moveTo(150,150);
var secondhu = second/60*2*Math.PI;
context.lineTo(Math.sin(secondhu)*90+150,-Math.cos(secondhu)*90+150);
context.lineWidth="1";
context.closePath();
context.stroke();
//设置分针
context.beginPath();
context.strokeStyle = "blue";
context.moveTo(150,150);
var secondhu = (minute+second/60)/60*2*Math.PI;
context.lineTo(Math.sin(secondhu)*70+150,-Math.cos(secondhu)*70+150);
context.lineWidth="3";
context.closePath();
context.stroke();
//设置时针
context.beginPath();
context.strokeStyle = "black";
context.moveTo(150,150);
var secondhu = (hour+minute/60)/12*2*Math.PI;
context.lineTo(Math.sin(secondhu)*60+150,-Math.cos(secondhu)*60+150);
context.lineWidth="5";
context.closePath();
context.stroke();
//设置数字
context.font="bold 20px sans-serif";
context.fill;
for(var i=1;i<=12;i++){
var txt = i;
var txthu = i/12*2*Math.PI;
context.fillText(txt,Math.sin(txthu)*85+141,-Math.cos(txthu)*85+155);
}
context.restore;
}

html代码:

canvas元素示例




相关推荐

  • POWER霸王钟表实木挂钟客厅中式复古电子时钟 POWER霸王钟表实木挂钟客厅中式复古电子时钟以下为大家分享买过POWER霸王钟表实木挂钟客厅中式复古电子时钟的真实用户评价:外观很大气,很好,和我家客厅很配,虽然里面忘放了挂钩钉子,但POWER还是爽快的答应解决了。1、做工精致,性价比合
  • Fliqlo 一款精致高逼格的翻页时钟屏保软件 Fliqlo一款精致高逼格的翻页时钟屏保软件你是否希望Mac在静止的时候也呈现出最简约高贵的一面?一款精致的时钟屏保无疑会让你的整个办公桌面充满“逼格”,如果你正在寻找一款翻页时钟的话,那么接下来的这款屏保软件应该会适合你。接下来要推荐给你
  • HTML5网页设计写的小程序音乐随身听(附源码和效果图) 音乐随身听源码:效果截图:
  • PPT计时时钟升级到9.2 升级说明:------------------------------------------------------------一、新增功能1.正计时:增加时钟正计时;2.智能计时:如果换PPT则重新计时,PPT不换继续计时;3.数据统计
  • 教研互动  【第一次】时、分的认识和间隔5分钟的时间读写  教学设计 《时、分的认识和间隔5分钟的时间读写》教学设计最终定稿河北省唐山市丰润区杨官林镇豆各庄小学郝东华教学内容:二年级上册90、91页。教学目标:知识与技能:通过观察钟面,知道钟面上共有12个大格、60个小格;理解1时=60分;掌握读取钟面时间的
  • 人生时钟,你现在几点? 《人生时钟,你现在几点?》活到现在,你感觉人生的路走了多久呢?如果你对这个问题有些不知所措的话,我不妨换个角度再问一次。如果将人出生到死亡的时间比作一天的24小时,那么你觉得自己现在正活在几点钟?是温暖和煦的清晨还是烈日当头的正午?刚刚大学
  • 时钟同步守护进程NTP 时钟同步守护进程Linux的时钟在Linux中有硬件时钟(RealTimeClock,简称RTC)与系统时钟(SystemClock)两种时钟。硬件时钟是指主机板上的由电池供电的硬件时钟设备,也就是通常可在BIOS画面设定的时钟;系统时钟则
  • 百花园(352)——时钟花 百花园(352)——时钟花这种美丽的黄色小花,就是时钟花科的草本植物时钟花。它来自遥远的南美洲。时钟花有多个品种,常见的有黄色时钟花和白色时钟花。时钟花的花开花谢非常有规律。早上开晚上闭,更有意思的是,它的花几乎同开同谢,奇特无比春云如烟对
  • 测试Metro1000时钟保护倒换 1.在Metro1000管理主菜单中选择“配置>时钟视图”。分别选定各个网元,在主菜单中选择“时钟视图>网元时钟设置”。在菜单下选择“时钟同步状态”、“时钟源优先级表”、“时钟源恢复参数”、“时钟源倒换条件”、“时钟子网设置”。
  • 时钟问题 时钟问题1.行程问题中时钟的标准制定;2.时钟的时针与分针的追及与相遇问题的判断及计算;3.时钟的周期问题。教学目标时钟问题可以看做是一个特殊的圆形轨道上2人追及或相遇问题,不过这里的两个“人”分别是时钟的分针和时针。时钟问题有别于其他行程
  • PCB高速时钟线处理 2时钟线的处理2.1)建议先走时钟线。2.2)频率大于等于66M的时钟线,每条过孔数不要超过2个,平均不得超过1.5个。2.3)频率小于66M的时钟线,每条过孔数不要超过3个,平均不得超过2.5个2.4)长度超过12inch的时钟线,如果频
  • 汉时旗舰店-汉时钟表 学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01 汉时旗舰店-汉时钟表学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01商品【汉时钟表学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01】是来自于天猫店铺汉时旗舰店所经营的商品,其汉时旗舰店主要经营的商品有:计时器,闹钟创意时尚,

你的评论

就没有什么想说的吗?

最新博客

关于我们 移动版

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X