60秒跳动60次旋转360度。（可以使用linear 线性运动）
# animation:anim_mm 60s linear infinite
animation:mm 60s steps(60) infinite
@keyframes mm{
to{ transform:rotate(360deg) }
}
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>技能训练4-5</title>
<style>
div.wrap{
margin: 0 auto
width:400px
height:110px
border:1px solid gray
}
div.wrap>#b{
text-align:center
font:bolder 30px '宋体'
color:red
background-color:gray
height:40px
}
div.wrap>#c{
text-align:center
font:normal 25px '黑体'
}
</style>
<script>
onload=function(){
var c=document.getElementById("c")
setInterval(function(){
var now=new Date
var y=now.getFullYear()
var M=now.getMonth()+1
var d=now.getDate()
var h=now.getHours()
var m=now.getMinutes()
var s=now.getSeconds()
var e=now.getDay()
var w
if(h<12){
w="上午"
}else if(w<18){
w="下午"
}else{
w="晚上"
}
h=h>12?h-12:h
h=h<10?"0"+h:h
m=m<10?"0"+m:m
s=s<10?"0"+s:s
c.innerHTML=y+"年"+M+"月"+d+"日 星期"+"日一二三四五六".split("")[e]
+"<br />"+w+" "+h+":"+m+":"+s
},1000)
}
</script>
</head>
<body>
<div class="wrap">
<div id="b">
<span>我的小时钟</span>
</div>
<div id="c">
</div>
</div>
</body>
</html>
我这里有一段js动态时钟的代码，日历的比较复杂，没有研究：<scripttype="text/javascript">
setInterval(function() {
var week
var date
var today = new Date()
var year = today.getFullYear()
var month = today.getMonth() + 1
var day = today.getDate()
var ss = today.getDay()
var hours = today.getHours()
var minutes = today.getMinutes()
var seconds = today.getSeconds()
date = year + "年" + month +"月" + day + "日 "
if (ss == 0) week = "星期日"
if (ss == 1) week = "星期一"
if (ss == 2) week = "星期二"
if (ss == 3) week = "星期三"
if (ss == 4) week = "星期四"
if (ss == 5) week = "星期五"
if (ss == 6) week = "星期六"
if (minutes <= 9) minutes ="0" + minutes
if (seconds <= 9) seconds ="0" + seconds
document.getElementById('p_time').innerHTML = "今天是：" + date
+ week + " " + hours + ":" + minutes + ":" +
seconds
},
1000)
</script>
这里一定要注意，html里要有一个id为p_time的div。
