用JS写一个钟表

JavaScript010

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

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

你试下,,,,

setTimeout定时document.write以后,重新打开输出流,会清空页面内容,包括你以前的代码,简单改了一下:

<script>

function tick() {

var hours, minutes, seconds, xfile

var intHours, intMinutes, intSeconds

var today

today = new Date()

intHours = today.getHours()

intMinutes = today.getMinutes()

intSeconds = today.getSeconds()

if (intHours == 0) {

hours = "12:"

xfile = "午夜"

} else if (intHours <12) {

hours = intHours+":"

xfile = "上午"

} else if (intHours == 12) {

hours = "12:"

xfile = "正午"

} else {

intHours = intHours - 12

hours = intHours + ":"

xfile = "下午"

}

if (intMinutes <10) {

minutes = "0"+intMinutes+":"

} else {

minutes = intMinutes+":"

}

if (intSeconds <10) {

seconds = "0"+intSeconds+" "

} else {

seconds = intSeconds+" "

}

timeString = xfile+hours+minutes+seconds

document.getElementById("t").innerHTML=timeString

window.setTimeout("tick()", 1000)

}

window.onload=tick

</script>

<div id="t"></div>

================================

Clock.innerHTML = timeString

定时重写clock的内容,达到时钟效果