clock()
setInterval(clock,1000)
}
function clock(){
var now = new Date()
var ctx = document.getElementById('canvas').getContext('2d')
ctx.save()
ctx.clearRect(0,0,150,150)
ctx.translate(75,75)
ctx.scale(0.4,0.4)
ctx.rotate(-Math.PI/2)
ctx.strokeStyle = "black"
ctx.fillStyle = "white"
ctx.lineWidth = 8
ctx.lineCap = "round"
// Hour marks
ctx.save()
for (var i=0i<12i++){
ctx.beginPath()
ctx.rotate(Math.PI/6)
ctx.moveTo(100,0)
ctx.lineTo(120,0)
ctx.stroke()
}
ctx.restore()
// Minute marks
ctx.save()
ctx.lineWidth = 5
for (i=0i<60i++){
if (i%5!=0) {
ctx.beginPath()
ctx.moveTo(117,0)
ctx.lineTo(120,0)
ctx.stroke()
}
ctx.rotate(Math.PI/30)
}
ctx.restore()
var sec = now.getSeconds()
var min = now.getMinutes()
var hr = now.getHours()
hr = hr>=12 ? hr-12 : hr
ctx.fillStyle = "black"
// write Hours
ctx.save()
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14
ctx.beginPath()
ctx.moveTo(-20,0)
ctx.lineTo(80,0)
ctx.stroke()
ctx.restore()
// write Minutes
ctx.save()
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(-28,0)
ctx.lineTo(112,0)
ctx.stroke()
ctx.restore()
// Write seconds
ctx.save()
ctx.rotate(sec * Math.PI/30)
ctx.strokeStyle = "#D40000"
ctx.fillStyle = "#D40000"
ctx.lineWidth = 6
ctx.beginPath()
ctx.moveTo(-30,0)
ctx.lineTo(83,0)
ctx.stroke()
ctx.beginPath()
ctx.arc(0,0,10,0,Math.PI*2,true)
ctx.fill()
ctx.beginPath()
ctx.arc(95,0,10,0,Math.PI*2,true)
ctx.stroke()
ctx.fillStyle = "#555"
ctx.arc(0,0,3,0,Math.PI*2,true)
ctx.fill()
ctx.restore()
ctx.beginPath()
ctx.lineWidth = 14
ctx.strokeStyle = '#325FA2'
ctx.arc(0,0,142,0,Math.PI*2,true)
ctx.stroke()
ctx.restore()
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>js实现倒计时60秒的简单代码(推荐)</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
var countdown=60
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled")
val.value="免费获取验证码"
countdown = 5
} else {
val.setAttribute("disabled", true)
val.value="重新发送(" + countdown + ")"
countdown--
setTimeout(function() {
settime(val)
},1000)
}
}
</script>
</body>
</html>
JavaScript简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 课外书
如果 JavaScript 教程学习完毕，并且需要更深入地学习这门语言，《JavaScript 高级教程》绝对是您最好的选择。本教程从 JavaScript 的历史开始讲起，直到当前它对 XML 和 Web 服务的支持。
将学习到如何扩展该语言，以使它适应特殊的需求。
还将学到如何使用 JavaScript 创建无缝的客户机 - 服务器通信。
