怎么使用html5 做一个时钟

2023-03-01 10:42:02html-css012

怎么使用html5 做一个时钟,第1张

<html>

002 <head>

003 <title>HTML5 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(h>12){

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>

代码：

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=hour>12?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=0i<12i++){

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=0i<60i++){

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)

<!DOCTYPE HTML>

<html>

<head>

<title>无标题文档</title>

<style>

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

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

#box span{ width:2pxheight:6pxbackground:#666 position:absoluteleft:99pxtop:0-webkit-transform-origin:0 100px}

#hand{ width:12pxheight:12px position:absoluteleft:97pxtop:97px}

#hour{ width:4px height:45pxbackground:#000 position:absoluteleft:4pxbottom:6px -webkit-transform-origin:bottom}

#min{width:2pxheight:60pxbackground:#666 position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}

#sec{width:2pxheight:75pxbackground:red position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}

#centre{height:12pxborder-radius:9pxbackground:#000 position:relative}

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

</style>

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=0i<60i++)

{

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

}

obj.innerHTML=sHtml

}

</script>

</head>

<body>

</div>

</div>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：平板电脑关上盖子就锁屏的原理

# 下一篇：怎么设置电脑的快捷键?

推荐阅读

热门文章

最新发布

标签列表

怎么使用html5 做一个时钟

给您推荐相同类型的内容：