当前位置: 传客网 > 用HTML5的canvas写的时钟

用HTML5的canvas写的时钟

2017-01-11 作者:夺命红烧肉v_938

自己瞎琢磨写的,以下为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】是来自于天猫店铺汉时旗舰店所经营的商品,其汉时旗舰店主要经营的商品有:计时器,闹钟创意时尚,

  • 简单时钟的实现

    程序实现功能:1:利用Applet应用程序设计时钟界面,包括部分刻度、表盘、时针、分针、秒针。2:实现界面的刷新和时间的显示。设计思路:1:利用g.drawLine()实现线条的描绘,利用g.drawOval()画圆,利用g.drawStr

  • 标准同步时钟

    标准同步时钟解决方案一、前言SYN4505型标准同步时钟是由西安同步电子科技有限公司精心设计、自行研发生产的一款多功能时钟设备,内装高精度恒温晶振0CXO,接收北斗二代/GPS/GLONASS卫星信号和IRIG-B码信号,优先选择卫星信号,

  • 北斗网络同步时钟解决方案

    北斗网络同步时钟解决方案一、前言中国北斗卫星导航系统(BeiDouNavigationSatelliteSystem,BDS)是中国自行研制的全球卫星导航系统。是继美国全球定位系统(GPS)、俄罗斯格洛纳斯卫星导航系统(GLONASS)之后

  • 新浪博客时钟代码与添加

    新浪博客时钟代码与添加文/翼飞(网转)一、关于时钟代码好多文章介绍如何在新浪博客添加时钟,并给出不少免费的FLASH时钟代码,然而经我今天试验之后发现,这些代码有的地址早已失效,有的代码地址虽然有效,但粘贴进去后也显示不出时钟来。这里,我把

  • ◆ 新浪博客时钟代码与添加(新)

    新浪博客时钟代码与添加文/翼飞一、关于时钟代码好多文章介绍如何在新浪博客添加时钟,并给出不少免费的FLASH时钟代码,然而经我今天试验之后发现,这些代码有的地址早已失效,有的代码地址虽然有效,但粘贴进去后也显示不出时钟来。这里,我把收集的几

  • 博客时钟

    如何添加博客时钟:1、打开模块;2、打开自定义模块中的“自定义文本模块”;3、选中“显示源代码”;4、在空白框中加入时钟代码,文字“时钟地址”就是时钟的下载地址:<embedsrc=时钟地址width=150height=215typ

  • [转载]新浪博客时钟代码与添加

    原文地址:新浪博客时钟代码与添加作者:我心飞翔新浪博客时钟代码与添加文/翼飞(网转)一、关于时钟代码好多文章介绍如何在新浪博客添加时钟,并给出不少免费的FLASH时钟代码,然而经我今天试验之后发现,这些代码有的地址早已失效,有的代码地址虽然

  • S3C2440的时钟和电源管理

    时钟和电源管理模块由三部分组成:时钟控制(clockCONT),USB控制(usbCONT)和电源控制(powerCONT)。S3C2440A中的时钟控制逻辑可以产生必须的时钟信号,包括CPU的FCLK,AHB总线(主要用于高性能模块如CP

返回
顶部