使用HTML，CSS，JS动态生成时钟

首先展示一哈最终的成品，哈哈哈哈！

说明： 全部是使用div生成一个时钟，通过使用audio标签设置准点报时和秒针移动时产生的滴答声音。

		<audio src="../audio/滴答.mp3" autoplay loop></audio>
		<audio class="time" src="" autoplay ></audio>
		<div class="clock">
			<div class="box"></div>
			<div class="second"></div>
			<div class="minute"></div>
			<div class="hour"></div>		
		</div>
        <div class="simple">
			<div class="simple_pendulum"></div>
		</div>

通过CSS调节div的样式

#body{background-color: #00ff7f;}
			.clock{
				width: 400px;
				height: 400px;
				position: relative;
				margin: 40px auto;
				border-radius: 50%;
				box-shadow:  5px 5px 20px rgba(0, 0,0,0.5);
				background:white;
				border: 8px solid rgba(0, 0,0,0.8);
				background-image: url("../image/表盘.jpg");
				opacity: 1;
				float: right;
				clear: right;
				z-index: 3;
			
			}
			.box{width: 100%;			
			height: 100%;
			position: absolute;
			top: 0%;
			left: 0%;
			}
			.box div{
				width: 0px;
				height: 200px;
				position: absolute;
				left: 200px;
				transform: rotate(0deg);
				transform-origin: bottom right;
				background: rgba(0, 0, 0, 0.5);
			}
			.box div:after{
				content: "";
				position: absolute;
				background: #000000;
				width: 2px;
				height: 10px;
				left: -1px;
			}
			.box div.five:after {
					position: absolute;
					content: "";
					width: 4px;
					height: 20px;
					left: -2px;
					top: 0;
					background:black;
					border-radius: 0 0 2px 2px;
				}
				
			.second{
				width:1px;
				height: 200px;
				background: #ffce00;
				position:  absolute;
				left: 200px;
				margin-top: 30px;
				z-index: 10;
				transform: rotate(45deg) ;
				transform-origin: center 170px;
				
			}
			.second:after{
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				background: rgb(192,133,88);
				border-radius: 50%;
				bottom: 20px;
				left: -10px;
			}
			.minute{
				width: 2px;
				height: 140px;
				background: #000000;
				position: absolute;
				left: 199px;
				margin-top: 80px;
				z-index: 9;
				transform-origin: center 120px;
				transform: rotate(0deg);
			}
			
			.hour{
				width: 6px;
				height: 100px;
				background: #000000;
				position: absolute;
				left: 197px;
				margin-top: 115px;
				z-index: 8;
				border-radius: 3px;
				transform: rotate(0deg);
				//transform-origin: center buttom;
				transform-origin: center 85px;
			}
			.simple{
				width: 300px;
				height: 300px;
				
				float: right;
				margin-right: 50px;
				position: relative;
				top: -44px;
				z-index: 0;
			}
			.simple_pendulum{
				width:6px;
				height: 180px;
				background: #d0d0d0;
				position:  absolute;
				left: 140px;
				top: -50px;
				transform: rotate(10deg);
				transform-origin: center top;		
				animation: identifier 2s linear infinite both;
			}
			@keyframes identifier {
				from,to{
					transform: rotate(45deg);
				}
				50%{
					transform: rotate(-45deg);
				}
				
			}
			.simple_pendulum:after{
				content: "";
				position: absolute;
				width: 50px;
				height: 50px;
				background: rgb(242,192,86);
				border: 1px solid #d9d9d9;
				border-radius: 50%;
				bottom: -20px;
				left: -20px; 
			}

下面是JS中的全局变量

                var box = document.getElementsByClassName("box")[0];
				var ssObj = document.getElementsByClassName("second")[0];
				var mmObj = document.getElementsByClassName("minute")[0];
				var hhObj = document.getElementsByClassName("hour")[0];			
				//var date = new Date(2001,01,1,10,59,55);//测试		
				var date = new Date();
				var hh = date.getHours();
				var mm = date.getMinutes();		
			    var ss = date.getSeconds();
               //下面的参数为准点报时使用（全局变量）
			    var s=ss;//秒数
			    var m=mm;//分
			    var h=hh;//时
                var deg=0;//度数

 生成表盘的刻度：

			    for(var i=0;i<60;i++){
				 
				    var div1=document.createElement("div");
				  
				   if(i%5==0){
					    div1.className="five";
				   }
				   div1.style.transform="rotate("+Deg+"deg)";
				  box.appendChild(div1);
				    Deg+=6;			   	   
			    }

 控制指针的移动

function drawSS(){			   
				  ssDeg=360*ss/60;
				  mmDeg=360*mm/60+(6*ss/60);
				   hhDeg=360*(hh%12)/12+(30*mm/60);
				   hhObj.style.transform="rotate("+hhDeg+"deg)";
				  // hhObj.style.transform = "rotate(" + hhDeg + "deg)";
				   ssObj.style.transform="rotate("+ssDeg+"deg)";
				    mmObj.style.transform="rotate("+mmDeg+"deg)";
				   ss+=1;
				   setTimeout(function()
				   {drawSS();},1000);
			   }

 准点报时:

			function time_signal(){
				var time0=document.getElementsByClassName("time")[0];					
			     s=s+1;
				if(s==60)
					m=m+1;
				if(m==60)
				   h=h+1;
			      var str="../audio/准点报时/"+h+".mp3";
			
				if(m==60&&s==60)	 			 
				 time0.src=str;		 
				 m=m%60;
				 s=s%60;
				 h=h%24;
				 setTimeout(function()
				 {time_signal();},1000);
			}

全部的JS和HTML代码：（CSS代码需要自己添加一哈）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

<link rel="stylesheet" href="../css (2)/CreateOcolck.css">

	</head>
	<body>		
		<audio src="../audio/滴答.mp3" autoplay loop></audio>
		<audio class="time" src="" autoplay ></audio>
		<div class="clock">
			<div class="box"></div>
			<div class="second"></div>
			<div class="minute"></div>
			<div class="hour"></div>		
		</div>
        <div class="simple">
			<div class="simple_pendulum"></div>
		</div>
		
		<script >		
				var box = document.getElementsByClassName("box")[0];
				var ssObj = document.getElementsByClassName("second")[0];
				var mmObj = document.getElementsByClassName("minute")[0];
				var hhObj = document.getElementsByClassName("hour")[0];			
				//var date = new Date(2001,01,1,10,59,55);//测试		
				var date = new Date();
				var hh = date.getHours();
				var mm = date.getMinutes();		
			    var ss = date.getSeconds();
			    var s=ss;
			    var m=mm;
			    var h=hh	
				
			    var Deg=0;
			    for(var i=0;i<60;i++){
				 
				    var div1=document.createElement("div");
				  
				   if(i%5==0){
					    div1.className="five";
				   }
				   div1.style.transform="rotate("+Deg+"deg)";
				  box.appendChild(div1);
				    Deg+=6;			   	   
			    }
				 time_signal();
				 drawSS();
				   		
			   function drawSS(){			   
				  ssDeg=360*ss/60;
				  mmDeg=360*mm/60+(6*ss/60);
				   hhDeg=360*(hh%12)/12+(30*mm/60);
				   hhObj.style.transform="rotate("+hhDeg+"deg)";
				  // hhObj.style.transform = "rotate(" + hhDeg + "deg)";
				   ssObj.style.transform="rotate("+ssDeg+"deg)";
				    mmObj.style.transform="rotate("+mmDeg+"deg)";
				   ss+=1;
				   setTimeout(function()
				   {drawSS();},1000);
			   }		
			function time_signal(){
				var time0=document.getElementsByClassName("time")[0];					
			     s=s+1;
				if(s==60)
					m=m+1;
				if(m==60)
				   h=h+1;
			      var str="../audio/准点报时/"+h+".mp3";
			
				if(m==60&&s==60)	 			 
				 time0.src=str;		 
				 m=m%60;
				 s=s%60;
				 h=h%24;
				 setTimeout(function()
				 {time_signal();},1000);
			}
		</script>
	</body>
</html>