<html>
<head>
<title></title>
<style type="text/css">
.div{
width:0px;
height:0px;
}
#div1,.img{
width:500px;
height:500px;
margin:0 auto;
background-size:100%;
}
#div1{
background-image : url("时钟/时钟.png");
}
#img2{
background-image : url("时钟/时.png");
}
#img3{
background-image : url("时钟/分.png");
}
#img4{
background-image : url("时钟/秒.png");
}
</style>
<script type="text/javascript">
var second=0;
var minute=0;
var hour=0;
function create(){
var time=new Date();
var div1=document.getElementById("div1");
var div2=document.createElement("div");//时
var img2=document.createElement("div");//第一个div是底板,他是不可以旋转的,因为他旋转了,他上面的元素 也会跟着旋转,
//第二个div 是用来显示图片的, 如果用image 标签, 透明图片 会有标识;不好看;
hour=time.getHours();//初始化时间
img2.setAttribute("class","img");
img2.setAttribute("id","img2");
div2.setAttribute("class","div");
div1.appendChild(div2);
div1.appendChild(img2);
var div3=document.createElement("div");//分钟
var img3=document.createElement("div");
minute=time.getMinutes();//初始化时间
img3.setAttribute("class","img");
img3.setAttribute("id","img3");
div3.setAttribute("class","div");
div2.appendChild(div3);
div2.appendChild(img3);
var div4=document.createElement("div");//秒
var img4=document.createElement("div");
second=time.getSeconds();//初始化时间
img4.setAttribute("class","img");
img4.setAttribute("id","img4");
div4.setAttribute("class","div");
div3.appendChild(div4);
div3.appendChild(img4);
update(second,"img4",6);
update(minute,"img3",6);
update(hour,"img2",30);
}
onload=function(){
create();
setInterval(function(){
update(second,"img4",6);
//秒部分
if(second==60)
{
update(minute,"img3",6);
//分钟部分
if(minute==60)
{
update(hour,"img2",30);
//小时部分
minute=0;
if(hour==24)
{
hour=0;
}
hour++;
}
second=0;
minute++;
}
second++;
},1000)
}
function update(time,element , num){//第一个参数 当前的 秒数,分数,小时
//第二个参数 当前的div
//第三个参数 每一次移动的基数, 秒和分一样 360/60=6;小时 360/24=15;
var secondrotate = 'rotate('+time*num+'deg)';
var scss = '-moz-transform:' + secondrotate + ';-o-transform:' + secondrotate + ';-ms-transform:' + secondrotate ;
try
{
document.getElementById(element).style.cssText = scss;
document.getElementById(element).style.webkitTransform = secondrotate;
}
catch(err)
{
alert(1);
}
}
</script>
</head>
<body>
<div class="div" id="div1">
</div>
</body>
</html>
