用JS写一个钟表

JavaScript07

用JS写一个钟表,第1张

<!doctype html>

<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>

你试下,，，，