怎樣用HTML5制作旋轉時鐘

!DOCTYPE?HTML

成都創新互聯公司主營滿洲網站建設的網絡公司,主營網站建設方案,App定制開發,滿洲h5小程序設計搭建,滿洲網站營銷推廣歡迎滿洲等地區企業咨詢

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

怎么使用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

如何使用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);

分享文章：html5時鐘的簡單介紹
文章源于：http://vcdvsql.cn/article2/dsdisic.html

成都網站建設公司_創新互聯，為您提供網站排名、網站營銷、微信公眾號、營銷型網站建設、網站設計公司、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯