<html>
<head>
<meta charset="UTF-8">
<title>clock test</title>
<script type="text/javascript">
onload = function(){
var canvas = document.querySelector('canvas')
var ctx =canvas.getContext('2d')
var frameId = null
var start = Date.now()
var draw = function(){
console.log(frameId)
ctx.clearRect(0,0,410,410)
var now = new Date()
var sec = now.getSeconds()
var min = now.getMinutes()
var hour = now.getHours() + min/60
hour = hour>12 ? hour-12 :hour
ctx.save()
ctx.beginPath()
ctx.strokeStyle ='#ABCDEF'
ctx.lineWidth =10
ctx.arc(205,205,200,0,360,false)
ctx.stroke()
ctx.closePath()
ctx.restore()
// 画时针刻度
for(var i = 1i<=12i++){
ctx.save()
ctx.lineWidth=8
ctx.font = 'normal 400 20px/2 sans-serif'
ctx.translate(205,205)
ctx.rotate(i*30*Math.PI/180)
ctx.beginPath()
ctx.moveTo(0,-195)
ctx.lineTo(0,-180)
ctx.fillText(i,(i>10?-10:-5),-160)
ctx.closePath()
ctx.stroke()
ctx.restore()
}
// 画分针秒针刻度
for(var i = 0i<60i++){
ctx.save()
ctx.lineWidth=6
ctx.translate(205,205)
ctx.rotate(i*6*Math.PI/180)
ctx.beginPath()
ctx.moveTo(0,-195)
ctx.lineTo(0,-185)
ctx.closePath()
ctx.stroke()
ctx.restore()
}
// 画时针
ctx.save()
ctx.lineWidth=10
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(hour*30*Math.PI/180)
ctx.moveTo(0,-155)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画分针
ctx.save()
ctx.lineWidth=6
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(min*6*Math.PI/180)
ctx.moveTo(0,-165)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画秒针
ctx.save()
ctx.lineWidth=4
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.moveTo(0,-175)
ctx.lineTo(0,20)
ctx.closePath()
ctx.stroke()
ctx.restore()
// 画秒针装饰
ctx.save()
ctx.lineWidth=4
ctx.fillStyle="#ccc"
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.arc(0,0,10,0,360,false)
ctx.closePath()
ctx.stroke()
ctx.fill()
ctx.restore()
ctx.save()
ctx.lineWidth=4
ctx.strokeStyle="#333"
ctx.fillStyle="red"
ctx.translate(205,205)
ctx.beginPath()
ctx.rotate(sec*6*Math.PI/180)
ctx.arc(0,-150,8,0,360,false)
ctx.closePath()
ctx.stroke()
ctx.fill()
ctx.restore()
if(Date.now()-start >=1000){
start = Date.now()
frameId = requestAnimationFrame(draw)
}else{
start = Date.now()
setTimeout(draw,1000)
}
}
draw()
}
</script>
</head>
<body>
<canvas width="410" height="410">你的浏览器不支持canvas标签</canvas>
</body>
</html>
利用new Date()可以轻松的实现钟表功能,甚至日历功能.如果要实现计时器功能也可以用这个对象.
var c = 1000 // 一千微秒,就是一秒
function funBeginDisTime() {
c = c + 1000 // 节奏为一秒
var now = new Date(0,0,0,0,0,0,c)
var day = now.getDate()
var hour = now.getHours()
var minutes = now.getMinutes()
var sec = now.getSeconds()
$("#myClock").html(day + "天"+ hour + "时" + minutes + "分" + sec + "秒")
myTime = setTimeout("funBeginDisTime()", 1000)// 每一秒执行一次
}
function funStopDisTime() {
clearTimeout(myTime)
}
body>
<input id="Button2" type="button" value="开始" onclick="funBeginDisTime()"/>
<span id="myClock"></span>
<input id="Button1" type="button" value="暂停" onclick="funStopDisTime()" />
</body>
setInterval() 是循环重复执行某个动作,
setTimeout()是只执行一次.
比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval():
[javascript] view plain copy
setInterval("reloadAction()", 5000)
[javascript] view plain copy
function reloadAction() {
$.ajax({
"type":"POST",
"url":"live.php",
"data":"getData=live",
"success":function(data) {
// ....
}
})
}
<html><head>
<script type="text/javascript">
<!--
window.onload=function(){
var oDiv=document.getElementById('time') // 获取DIV
function theTime(){
var theDate=new Date() // 创建一个日期对象
var year=theDate.getFullYear() // 获取年份
var month=theDate.getMonth() // 获取月份
var day=theDate.getDate() //获取日
var hour=theDate.getHours() //获取小时
var minues=theDate.getMinutes() // 获取分钟
var second=theDate.getSeconds() // 获取秒
oDiv.innerHTML="现在的时间是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second
}
theTime() // 执行时间函数
setInterval(theTime,1000) // 更新时间
}
//-->
</script>
</head>
<div id="time"></div>
</html>
你试下,，，，
