Html
    Css
    Js

    
                        
.clock {
	width:300px;
	height:300px;
	background:#fff;
	margin:0 auto;
	margin-top:100px;
	border-radius:50%;
	position:relative;
	border:5px #b70b0b solid;
}
.clock::before {
	content:"";
	border:10px #fe1313 solid;
	width:310px;
	height:310px;
	border-radius:50%;
	position:absolute;
	left:-15px;
	top:-15px;
}
.circle {
	z-index:2;
	border:2px #f1807b solid;
	border-radius:50%;
	left:144px;
	top:144px;
	width:10px;
	height:10px;
	position:absolute;
	background:#fff;
}
.circle::before {
	content:"";
	width:6px;
	height:6px;
	background:#c13837;
	border-radius:50%;
	position:absolute;
	left:2px;
	top:2px;
}
.hour_hand {
	width:70px;
	height:6px;
	background:#676767;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(-90deg);
	transform-origin:0 2px;
}
.minute_hand {
	width:90px;
	height:6px;
	background:#676767;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(-90deg);
	transform-origin:0 2px;
}
.second_hand {
	width:110px;
	height:2px;
	background:#f1807b;
	/*border-radius:30% 50% 50% 30%;
	*/
			position:absolute;
	left:150px;
	top:150px;
	z-index:1;
	transform:rotate(0deg);
	transform-origin:0 1px;
}
.second_hand::before {
	content:"";
	display:block;
	width:0;
	height:0;
	border-width:6px 0 6px 9px;
	border-style:solid;
	border-color:transparent transparent transparent #f1807b;
	position:absolute;
	top:-5px;
	left:110px;
}
.scale {
	width:300px;
	height:300px;
	border-radius:50%;
	position:relative;
	top:-11px;
	left:3px;
}
.scale ul {
	list-style-type:none;
}
.scale ul li {
	width:6px;
	height:6px;
	background:#a2a2a2;
	border-radius:50%;
	position:absolute;
	transform-origin:2px 0;
}
.scale ul li.liVertical {
	width:12px;
	height:6px;
	background:#666665;
	border-radius:0%;
}
.scale ul li.liVertical span {
	display:block;
	top:-8px;
	left:-20px;
	position:absolute;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

jquery时钟代码(原创)

1.jquery用的比较少,主要是用来生成样式比较方便才用的
2.jquery的版本可以随意,只要1.8以上版本即可!

0