包含html制作时钟的词条

本篇文章给大家谈谈html制作时钟，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、怎么使用html5 做一个时钟
• 2、如何用HTML5中的canvas制作动画时钟
• 3、怎样用HTML5制作旋转时钟

怎么使用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中的canvas制作动画时钟

详细解释都在代码中,如下:

[html] view plain copy

!DOCTYPE HTML

html lang="en"

head

meta charset="utf-8" /

titleClock/title

style

body{background: #dddddd;}

#canvas{margin: 20px;padding:20px;background: #ffffff;border: thin inset #aaaaaa;}

/style

/head

body

canvas id=canvas height="300" width="600"/canvas

script type="text/javascript"

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

var context = canvas.getContext("2d");

/** 定义字体高度 */

var FONT_HEIGHT = 15,

/** 偏移量 */

MARGIN = 35,

/** 指针长度 */

HAND_TRUNCATION = canvas.width/25,

/** 小时指针长度 */

HOUR_HAND_TRUNCATION = canvas.height/10,

/** 指示器 */

NUMERAL_SPACING = 20,

/** 半径 */

RADIUS = canvas.height/2 - MARGIN,

/** 指针半径 */

HAND_RADIUS = RADIUS + NUMERAL_SPACING;

/** 画圆 */

function drawCircle(){

context.beginPath();

//画圆

context.arc(canvas.width/2,canvas.height/2,RADIUS,0,Math.PI*2,true);

//执行绘画 stroke是画线

context.stroke();

}

function drawNumerals(){

var numerals = [1,2,3,4,5,6,7,8,9,10,11,12];

var angle = 0;

var numeralWidth = 0;

for(var i in numerals){

angle = Math.PI/6 * (numerals[i]-3);

numeralWidth = context.measureText(numerals[i]).width;

context.fillText(numerals[i],canvas.width/2+Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,

canvas.height/2 + Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);

}

}

//画中心圆点

function drawCenter(){

context.beginPath();

context.arc(canvas.width/2,canvas.height/2,5,0,Math.PI*2,true);

//fill是画实心圆,填充

context.fill();

}

//绘画指针

function drawHand(loc,isHour){

var angle = (Math.PI*2)*(loc/60) - Math.PI/2,

handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;

context.moveTo(canvas.width/2,canvas.height/2);

context.lineTo(canvas.width/2 + Math.cos(angle) * handRadius,canvas.height/2 + Math.sin(angle)*handRadius);

context.stroke();

}

function drawHands(){

//得到当前时间

var date = new Date,hour = date.getHours();

//将24小时制转换为12小时制

hour = hour 12 ? hour - 12 : hour;

drawHand(hour*5 + (date.getMinutes()/60)*5,true,0.5);

drawHand(date.getMinutes(),false,0.5);

drawHand(date.getSeconds(),false,0.2);

}

function drawClock(){

//每次清除一次canvas

context.clearRect(0,0,canvas.width,canvas.height);

//重新画,形成动画效果

drawCircle();

drawCenter();

drawHands();

drawNumerals();

}

context.font = FONT_HEIGHT + 'px Arial';

loop = setInterval(drawClock, 1000);

/script

/body

/html

怎样用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

html制作时钟的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、html制作时钟的信息别忘了在本站进行查找喔。