<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:206pxheight:206px margin:80px auto position:relative}
#dial{height:200pxborder:3px solid #000 border-radius:103px position:relative}
#box span{ width:2pxheight:6pxbackground:#666 position:absoluteleft:99pxtop:0-webkit-transform-origin:0 100px}
#hand{ width:12pxheight:12px position:absoluteleft:97pxtop:97px}
#hour{ width:4px height:45pxbackground:#000 position:absoluteleft:4pxbottom:6px -webkit-transform-origin:bottom}
#min{width:2pxheight:60pxbackground:#666 position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#sec{width:2pxheight:75pxbackground:red position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#centre{height:12pxborder-radius:9pxbackground:#000 position:relative}
#dial span:nth-of-type(5n+1){height:10pxbackground:#000}
</style>
<script>
window.onload=function()
{
var oDial=document.getElementById("dial")
var oHour=document.getElementById("hour")
var oMin=document.getElementById("min")
var oSec=document.getElementById("sec")
toDial(oDial)
toTime(oHour,oMin,oSec)
setInterval(function(){
toTime(oHour,oMin,oSec)
},1000)
}
function toTime(oHour,oMin,oSec)
{
var oDate=new Date()
var iSec=oDate.getSeconds()
var iMin=oDate.getMinutes()+iSec/60
var iHour=(oDate.getHours()%12)+iMin/60
oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)"
oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)"
oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)"
}
function toDial(obj)
{
var sHtml=""
var iDeg=6
for(var i=0i<60i++)
{
sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>"
}
obj.innerHTML=sHtml
}
</script>
</head>
<body>
<div id="box">
<div id="dial">
</div>
<div id="hand">
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="centre"></div>
</div>
</div>
</body>
</html>
找到一个flash时钟的swf文件，按照在PPT上插flash的办法插入进去就可以了。网页背景加一个时钟，html5完全可以做出这种时钟效果，但不包括背景，看日期是5月10号的，如果是P的动图的话时间应该是在一个小范围内的，大范围的话图片会很大，不合适。
可以的，可以实时动态显示当前时间与当前日期，代码结构简洁、清晰、明了，（网络搜集，供参考）知识的汇总：
1.HTML5
2.CSS3
3.JavaScript
重难点汇总：
1.各个指针的旋转角度的获取，首先要明确以下概念：
一周为360度、12小时、60分钟、60秒；
公式：一周的度数/一周的时间；
即得出时针每过一小时要旋转30度；
分针每过一分钟要旋转6度；
秒针每过一秒钟要旋转6度；
下面是代码部分：
HTML:
<div id="box">
<div id="h"></div>
<div id="min"></div>
<div id="s"><div class="cen"></div></div>
<div id="data"></div>
</div>
CSS3:
body{
background-color: #aaa
margin: 0px
padding: 0px
}
#box{
width: 400px
height: 400px
border-radius: 100%
background: url(img/4706.jpg_wh860.jpg)0px 0px no-repeat
background-size: 400px
position: absolute
left: 500px
top: 200px
}
#h{
width: 100px
height: 10px
background-color: red
position: relative
top: 195px
left: 200px
}
#min{
width: 140px
height: 10px
background-color: yellow
position: relative
top: 185px
left: 200px
}
#s{
width: 180px
height: 10px
background-color: blue
position: relative
top: 175px
left: 200px
}
.cen{
width: 10px
height: 10px
background-color: white
border-radius: 100%
}
#data{
position: relative
top: 100px
left: 150px
color: red
font-size: 20px
}
JavaScript:
function tim(){
var d = new Date(),//获取当前系统时间
year = d.getFullYear(),//得到当前年份
mon = d.getMonth(),//得到当前月份
date = d.getDate(), //得到当前日期
hours = d.getHours(), //得到当前小时
minutes = d.getMinutes(), //得到当前分钟
seconds = d.getSeconds()//得到当前秒
var hou = ""
if(hours>12){
hou = "下午"
}
else{
hou = "上午"
}
document.getElementById("data").innerHTML= year+"年"+mon+"月"+date+"日"+"
"+hou
var n = document.getElementById("s")//获取秒针ID
n.style.transform = "rotate("+(seconds*6-90)+"deg)"//通过当前秒数，得到秒针旋转度数
n.style.transformOrigin = "left"//设置秒针旋转的基点
var i = document.getElementById("min")//获取分针ID
i.style.transform = "rotate("+(minutes*6-90)+"deg)"//通过当前分钟数，得到分针旋转度数
i.style.transformOrigin = "left"//设置分针旋转的基点
var h = document.getElementById("h")//获取时针ID
h.style.transform = "rotate("+((hours*30)+(minutes*0.5)-90)+"deg)"//通过当前小时数，得到时针旋转度数
h.style.transformOrigin = "left"//设置时针旋转的基点
}
setInterval("tim()",1000)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）