html5时钟的简单介绍

怎样用HTML5制作旋转时钟

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

title无标题文档/title

style

#box{width:206px;height:206px; margin:80px auto; position:relative;}

#dial{height:200px;border:3px solid #000; border-radius:103px; position:relative;}

#box span{ width:2px;height:6px;background:#666; position:absolute;left:99px;top:0;-webkit-transform-origin:0 100px;}

#hand{ width:12px;height:12px; position:absolute;left:97px;top:97px;}

#hour{ width:4px; height:45px;background:#000; position:absolute;left:4px;bottom:6px; -webkit-transform-origin:bottom;}

#min{width:2px;height:60px;background:#666; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}

#sec{width:2px;height:75px;background:red; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}

#centre{height:12px;border-radius:9px;background:#000; position:relative;}

#dial span:nth-of-type(5n+1){height:10px;background:#000;}

/style

script

window.onload=function()

{

var oDial=document.getElementById("dial");

var oHour=document.getElementById("hour");

var oMin=document.getElementById("min");

var oSec=document.getElementById("sec");

toDial(oDial);

toTime(oHour,oMin,oSec);

setInterval(function(){

toTime(oHour,oMin,oSec);

},1000)

};

function toTime(oHour,oMin,oSec)

{

var oDate=new Date();

var iSec=oDate.getSeconds();

var iMin=oDate.getMinutes()+iSec/60;

var iHour=(oDate.getHours()%12)+iMin/60;

oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)";

oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)";

oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)";

}

function toDial(obj)

{

var sHtml="";

var iDeg=6;

for(var i=0;i60;i++)

{

sHtml+="span style='-webkit-transform:rotate("+iDeg*i+"deg)'/span"

}

obj.innerHTML=sHtml;

}

/script

/head

body

div id="box"

    div id="dial"

    /div

    div id="hand"

        div id="hour"/div

        div id="min"/div

        div id="sec"/div

        div id="centre"/div

    /div

/div

/body

/html

相关问答

Q1: 怎么使用html5 做一个时钟

html

002 head

003 titleHTML5 Test/title

004 script type="application/x-javascript"

005 var panel, ctx, img;

006 var pw, ph, ox, oy;

007 function init(){

008 panel = document.getElementById("panel");

009 pw = panel.width;

010 ph = panel.height;

011 ox = pw/2;

012 oy = ph/2;

013 if(panel.getContext){

014 ctx = panel.getContext('2d');

015 }else{

016 alert('Your browser is not support Canvas tag!');

017 }

018

019 ctx.translate(ox, oy);

020

021 img = new Image();

022 img.onload = function(){

023 setInterval('draw()',1000);

024 }

025 img.src = 'bg.jpg';

026 }

027

028

029 function drawSecond(){

030 ctx.save();

031 ctx.rotate(Math.PI/180*currTime().s*6);

032 ctx.strokeStyle = "#09f";

033 ctx.lineWidth = 2;

034 ctx.lineCap = 'round'

035 ctx.beginPath();

036 ctx.moveTo(0,0);

037 ctx.lineTo(0,-140);

038 ctx.stroke();

039 ctx.restore();

040 }

041

042 function drawMinute(){

043 ctx.save();

044 ctx.rotate(Math.PI/180*currTime().m*6);

045 ctx.strokeStyle = "#f90";

046 ctx.lineWidth = 6;

047 ctx.lineCap = 'round'

048 ctx.beginPath();

049 ctx.moveTo(0,0);

050 ctx.lineTo(0,-100);

051 ctx.stroke();

052 ctx.restore();

053 }

054

055 function drawHour(){

056 ctx.save();

057 ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/

058 2);

059 ctx.strokeStyle = "#999";

060 ctx.lineWidth = 10;

061 ctx.lineCap = 'round'

062 ctx.beginPath();

063 ctx.moveTo(0,0);

064 ctx.lineTo(0,-60);

065 ctx.stroke();

066 ctx.restore();

067 }

068 function draw(){

069 ctx.clearRect(-pw/2,-ph/2,pw,ph);

070 drawBackground();

071 drawSecond();

072 drawMinute();

073 drawHour();

074 document.getElementById('time').innerHTML=currTimeStr();

075 }

076

077 function drawBackground(){

078 ctx.save();

079 ctx.translate(0, 0);

080 ctx.drawImage(img,-250,-250,500,500);

081 ctx.restore();

082 }

083

084 function currTimeStr(){

085 var d = new Date();

086 var h = d.getHours();

087 var m = d.getMinutes();

088 var s = d.getSeconds();

089 return h+':'+m+':'+s

090 }

091

092 function currTime(){

093 var d = new Date();

094 var h = d.getHours();

095 var m = d.getMinutes();

096 var s = d.getSeconds();

097 if(h12){

098 h = h-12;

099 }

100 return {"h":h,"m":m,"s":s};

101 }

102 /script

103 /head

104 body onload="init()"

105 canvas style="border:1px solid #000" id="panel" width="500" height="500

106 "

107 Your browser is not support Canvas tag!

108 /canvas

109 br/

110 span id="time"/span

111 /body

112 /html

Q2: 如何使用html5的画布画出时钟

代码：

var clock=document.getElementById("clock");

var cxt=clock.getContext("2d");

function drawNow(){

var now=new Date();

var hour=now.getHours();

var min=now.getMinutes();

var sec=now.getSeconds();

hour=hour12?hour-12:hour;

hour=hour+min/60;

//表盘(蓝色)

cxt.lineWidth=10;

cxt.strokeStyle="blue"

cxt.beginPath();

cxt.arc(250,250,200,0,360,false);

cxt.closePath();

cxt.stroke();

//刻度

//时刻度

for(var i=0;i12;i++){

cxt.save();

cxt.lineWidth=7;

cxt.strokeStyle="black";

cxt.translate(250,250);

cxt.rotate(i*30*Math.PI/180);//旋转角度 角度*Math.PI/180=弧度

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分刻度

for(var i=0;i60;i++){

cxt.save();

//设置分刻度的粗细

cxt.lineWidth=5;

//重置画布原点

cxt.translate(250,250);

//设置旋转角度

cxt.rotate(i*6*Math.PI/180);

//画分针刻度

cxt.strokeStyle="black";

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//时针

cxt.save();

// 设置时针风格

cxt.lineWidth=7;

cxt.strokeStyle="black";

cxt.translate(250,250);

cxt.rotate(hour*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.save();

cxt.lineWidth=5;

cxt.strokeStyle="black";

//设置异次元空间分针画布的中心

cxt.translate(250,250);

cxt.rotate(min*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.closePath();

cxt.stroke()

cxt.restore();

//秒针

cxt.save();

//设置秒针的风格

//颜色:红色

cxt.strokeStyle="red";

cxt.lineWidth=3;

//重置原点

cxt.translate(250,250);

//设置角度

//cxt.rotate(330*Math.PI/180);

cxt.rotate(sec*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,20);

cxt.closePath();

cxt.stroke();

//画出时针,分针,秒针的交叉点

cxt.beginPath();

cxt.arc(0,0,5,0,360,false);

cxt.closePath();

//设置填充

cxt.fillStyle="gray";

cxt.fill();

//cxt.strokeStyle="red";

cxt.stroke();

//画出秒针的小圆点

cxt.beginPath();

cxt.arc(0,-140,5,0,360,false);

cxt.closePath();

//设置填充

cxt.fillStyle="gray";

cxt.fill();

//cxt.strokeStyle="red";

cxt.stroke();/p

p cxt.restore();/p

p}

function drawClock(){

cxt.clearRect(0,0,500,500);

drawNow();

}

drawNow();

setInterval(drawClock,1000);