<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
#myTime {
color: white
border-style: solid
background-color: black
width: 200
height: 200
text-align: center
font-family: "agency fb"
}
#hm {
color: white
text-align: center
font-style: bold
font-size: 40px
}
#other {
color: white
text-align: center
}
</style>
<script language="javascript">
function showTime()
{
var theMoment = new Date()
var theHour = theMoment.getHours()
var theMinute = theMoment.getMinutes()
var hm = document.getElementById("hm")
hm.innerHTML = theHour + "<br/>" + theMinute
var other = document.getElementById("other")
other.innerHTML = theMoment.getSeconds()
}
var handler = window.setInterval('showTime()',1000)
</script>
</head>
<body>
<div id="myTime">
<div id="hm">
</div>
<span id="other">
</span>
</div>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload() }, 500) })</script></body>
</html>
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<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>
<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=0i<60i++)
{
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>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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)