HTML时钟日历插件编写

最终实现的效果如下，可进入展示页面查看
展示页面：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">2019年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
https://gitee.com/xyy9/roll/blob/master/img/clock.png
时针clock_hour.png
https://gitee.com/xyy9/roll/blob/master/img/clock_hour.png
分针clock_minute.png
https://gitee.com/xyy9/roll/blob/master/img/clock_minute.png
秒针clock_second.png
https://gitee.com/xyy9/roll/blob/master/img/clock_second.png