最终实现的效果如下，可进入展示页面查看

展示页面：http://xyy9.gitee.io/roll/

位于映像标题右侧显示，实时获取当前时间，各指针随时间转动

HTML

<!--时间表--><div id="Clock"><img id="clock_" src="img/clock.png" ><img id="clock_hour" src="img/clock_hour.png" ><img id="clock_minute" src="img/clock_minute.png" ><img id="clock_second" src="img/clock_second.png" ></div><div id="timer"><div id="time_year">11月20日</div><div id="time_clock">0时0分0秒</div><div id="time_weekday">周一</div></div>

clock.css

#Clock{width: 150px;height: 150px;left: 1500px;top: 150px;position: relative;}#clock_{width: 150px;height: 150px;left: ;top: -150px;position: relative;}#clock_hour{width: 150px;height: 150px;left: ;top: -303px;position: relative;}#clock_minute{width: 150px;height: 150px;left: ;top: -456px;position: relative;}#clock_second{width: 150px;height: 150px;left: ;top: -609px;position: relative;}

timer.js

//时钟计时function displayTime(){var date = new Date();var hour = date.getHours();var min = date.getMinutes();var sec = date.getSeconds();var timestr_year = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";var timestr_clock = date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";var weekday_num = date.getDay()+1;var weekday_str;switch (weekday_num){case 0:weekday_str = "一";break;case 1:weekday_str = "二";break;case 2:weekday_str = "三";break;case 3:weekday_str = "四";break;case 4:weekday_str = "五";break;case 5:weekday_str = "六";break;case 6:weekday_str = "日";break;default:break;}var timestr_weekday = "周"+weekday_str;document.getElementById("time_year").innerHTML = timestr_year;document.getElementById("time_clock").innerHTML = timestr_clock;document.getElementById("time_weekday").innerHTML = timestr_weekday;var imgHour = document.getElementById('clock_hour');var imgMin = document.getElementById('clock_minute');var imgSec = document.getElementById('clock_second');imgHour.style.transform = 'rotate(' + hour*30 + 'deg)';imgMin.style.transform = 'rotate(' + min*6 + 'deg)';imgSec.style.transform = 'rotate(' + sec*6 + 'deg)';}intervalTime = setInterval(displayTime,1000);

网站源码：码云仓库

图片：

表盘 clock.png

/xyy9/roll/blob/master/img/clock.png

时针clock_hour.png

/xyy9/roll/blob/master/img/clock_hour.png

分针clock_minute.png

/xyy9/roll/blob/master/img/clock_minute.png

秒针clock_second.png

/xyy9/roll/blob/master/img/clock_second.png