css+javascript特效：时钟（无图片纯div实现）
嗯，花了半个小时用css配合js搞了一个时钟出来，效果和配色方案如下：
代码很简单，css来刻画<div>表示的表盘、刻度、时针、分针、秒针、大头针（就是中间的转轴啦）；javascript不断获取当前时间，对css做出相应改变。
完整代码如下（for webkit only）：
<html>
<head>
<style>
#clock
{
position: absolute;
left: 200px;
top: 50px;
height: 200px;
width: 200px;
background-color: rgb(23, 44, 60);
border-style: solid;
border-width: 3px;
border-color: rgb(39, 72, 98);
border-radius:105px;
-webkit-box-shadow: 2px 0px 10px rgba(0,0,0,0.5);
}
.scale
{
position: absolute;
left: 98px;
top: 90px;
height: 20px;
width: 4px;
background-color: rgb(153, 80, 84);
-webkit-box-shadow: 2px 0px 10px rgba(0,0,0,0.5);
}
#hour_point
{
position: absolute;
left: 95px;
top: 80px;
height: 40px;
width: 10px;
background-color: rgb(217, 104, 49);
-webkit-box-shadow: 2px 0px 15px rgba(0,0,0,0.5);
}
#min_point
{
position: absolute;
left: 97px;
top: 70px;
height: 60px;
width: 6px;
background-color: rgb(217, 104, 49);
-webkit-box-shadow: 2px 0px 10px rgba(0,0,0,0.5);
}
#sec_point
{
position: absolute;
left: 99px;
top: 60px;
height: 80px;
width: 2px;
background-color: rgb(217, 104, 49);
-webkit-box-shadow: 2px 0px 5px rgba(0,0,0,0.5);
}
#pin
{
position: absolute;
left: 90px;
top: 90px;
height: 20px;
width: 20px;
background-color: rgb(230, 179, 61);
border-radius:10px;
-webkit-box-shadow: 2px 0px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id = 'clock'>
<script>
for (i = 0;i < 12;++i)
document.write("<div class = 'scale'></div>");
</script>
<div id = 'hour_point'></div>
<div id = 'min_point'></div>
<div id = 'sec_point'></div>
<div id = 'pin'></div>
</div>
</body>
<script>
scales = document.getElementsByClassName("scale");
for (i = 0;i < 12;++i)
scales[i].style.webkitTransform = "rotate(" + i * 30 + "deg) translate(0, -80px)";
hour = document.getElementById('hour_point');
min = document.getElementById('min_point');
sec = document.getElementById('sec_point');
function showTime()
{
Time = new Date();
hour.style.webkitTransform = "rotate(" + (Time.getHours() * 30 + Time.getMinutes() * 0.5) + "deg) translate(0, -20px)";
min.style.webkitTransform = "rotate(" + Time.getMinutes() * 6 + "deg) translate(0, -30px)";
sec.style.webkitTransform = "rotate(" + Time.getSeconds() * 6 + "deg) translate(0, -40px)";
setTimeout("showTime()", 50);
}
showTime();
</script>
</html>