<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>
CSS3简易表盘时钟 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3时钟</title>
<style>
.box{
width: 300px
height: 300px
border-radius: 50%
border: 5px solid #ccc
margin: 100px auto
position: relative
}
.kedu{
width: 300px
height: 300px
border-radius: 50%
position: relative
overflow: hidden
}
.kedu div{
height: 300px
position: absolute
left: 50%
}
.kedu div:nth-child(1){
width: 6px
background: #333
margin-left: -3px
}
.kedu div:nth-child(2){
width: 2px
background: #666
margin-left: -3px
transform: rotate(30deg)
}
.kedu div:nth-child(3){
width: 2px
background: #666
margin-left: -3px
transform: rotate(60deg)
}
.kedu div:nth-child(4){
width: 6px
background: #333
margin-left: -3px
transform: rotate(90deg)
}
.kedu div:nth-child(5){
width: 2px
background: #666
margin-left: -3px
transform: rotate(120deg)
}
.kedu div:nth-child(6){
width: 2px
background: #666
margin-left: -3px
transform: rotate(150deg)
}
.disc{
width: 20px
height: 20px
border-radius: 50%
background: #000
position: absolute
top: 50%
left: 50%
margin-left: -10px
margin-top: -10px
z-index: 2
}
.middisc{
width: 260px
height: 260px
border-radius: 50%
background: #fff
position: absolute
top: 50%
left: 50%
margin-left: -130px
margin-top: -130px
}
.hour{
width: 6px
height: 60px
background: #000
position: absolute
top: -50px
left: 50%
margin-left: -3px
transform-origin: bottom center
animation: move 43200s steps(60) 0s infinite
}
.minu{
width: 4px
height: 80px
background: green
position: absolute
top: -70px
left: 50%
margin-left: -2px
transform-origin: bottom center
animation: move 3600s steps(60) 0s infinite
}
.second{
width: 2px
height: 100px
background: #f00
position: absolute
top: -90px
left: 50%
margin-left: -1px
transform-origin: bottom center
-webkit-animation: move 60s steps(60) infinite
}
.cover{
width: 20px
height: 20px
border-radius: 50%
background: #000
position: absolute
}
@keyframes move{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
代码：var clock=document.getElementById("clock")
var cxt=clock.getContext("2d")
function drawNow(){
var now=new Date()
var hour=now.getHours()
var min=now.getMinutes()
var sec=now.getSeconds()
hour=hour>12?hour-12:hour
hour=hour+min/60
//表盘(蓝色)
cxt.lineWidth=10
cxt.strokeStyle="blue"
cxt.beginPath()
cxt.arc(250,250,200,0,360,false)
cxt.closePath()
cxt.stroke()
//刻度
//时刻度
for(var i=0i<12i++){
cxt.save()
cxt.lineWidth=7
cxt.strokeStyle="black"
cxt.translate(250,250)
cxt.rotate(i*30*Math.PI/180)//旋转角度 角度*Math.PI/180=弧度
cxt.beginPath()
cxt.moveTo(0,-170)
cxt.lineTo(0,-190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//分刻度
for(var i=0i<60i++){
cxt.save()
//设置分刻度的粗细
cxt.lineWidth=5
//重置画布原点
cxt.translate(250,250)
//设置旋转角度
cxt.rotate(i*6*Math.PI/180)
//画分针刻度
cxt.strokeStyle="black"
cxt.beginPath()
cxt.moveTo(0,-180)
cxt.lineTo(0,-190)
cxt.closePath()
cxt.stroke()
cxt.restore()
}
//时针
cxt.save()
// 设置时针风格
cxt.lineWidth=7
cxt.strokeStyle="black"
cxt.translate(250,250)
cxt.rotate(hour*30*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-140)
cxt.lineTo(0,10)
cxt.closePath()
cxt.stroke()
cxt.restore()
//分针
cxt.save()
cxt.lineWidth=5
cxt.strokeStyle="black"
//设置异次元空间分针画布的中心
cxt.translate(250,250)
cxt.rotate(min*6*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-160)
cxt.lineTo(0,15)
cxt.closePath()
cxt.stroke()
cxt.restore()
//秒针
cxt.save()
//设置秒针的风格
//颜色:红色
cxt.strokeStyle="red"
cxt.lineWidth=3
//重置原点
cxt.translate(250,250)
//设置角度
//cxt.rotate(330*Math.PI/180)
cxt.rotate(sec*6*Math.PI/180)
cxt.beginPath()
cxt.moveTo(0,-170)
cxt.lineTo(0,20)
cxt.closePath()
cxt.stroke()
//画出时针,分针,秒针的交叉点
cxt.beginPath()
cxt.arc(0,0,5,0,360,false)
cxt.closePath()
//设置填充
cxt.fillStyle="gray"
cxt.fill()
//cxt.strokeStyle="red"
cxt.stroke()
//画出秒针的小圆点
cxt.beginPath()
cxt.arc(0,-140,5,0,360,false)
cxt.closePath()
//设置填充
cxt.fillStyle="gray"
cxt.fill()
//cxt.strokeStyle="red"
cxt.stroke()</p>
<p> cxt.restore()</p>
<p>}
function drawClock(){
cxt.clearRect(0,0,500,500)
drawNow()
}
drawNow()
setInterval(drawClock,1000)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）