<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 charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1 id="time"></h1>
<script>
//Start DynamicTime
function DynamicTime () {
var now = new Date()
var Hs = now.getHours()/*获取本地小时*/
var Ms = now.getMinutes()/*获取本地分钟*/
var Ss = now.getSeconds()/*获取本地秒数*/
/*当< 时、分、秒 >小于10时，前面添加 “0”*/
var H = ((Hs < 10) ? "0" : "") + Hs
var M = ((Ms < 10) ? "0" : "") + Ms
var S = ((Ss < 10) ? "0" : "") + Ss
var time = H+":"+M+":"+S
//显示变化的时间，添加标签ID
var Time = document.getElementById("time")
Time.innerHTML = getYearMonthTodaysDate() + " " + time
}
var PerSecondDynamic = setInterval("DynamicTime()",1)
//End DynamicTime
function getYearMonthTodaysDate() {
var now = new Date()
var days = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
var months = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12')
/*获取本月时间，如果本月时间小于10则在前面添加“0”*/
var month = ((now.getMonth() < 10) ? "0" : "") + now.getMonth()
/*获取当天时间，如果当天时间小于10则在前面添加“0”*/
var date = ((now.getDate() < 10) ? "0" : "") + now.getDate()
var today = now.getFullYear()+"年"+month+"月"+date+"日 "+days[now.getDay()]
return (today)
}
</script>
</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条）