sz.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#data {
				background: url(https://bestace.github.io/fed/ppt/demos/jsBase/img/clock.jpg);
				width: 300px;
				height: 300px;
				background-size: 100%;
			}
			#mz {
				height: 100px;
				width: 3px;
				background: red;
				position: absolute;
				left: 157px;
				top: 158px;
				transform-origin: 50% top;
			}
			#fz {
				height: 80px;
				width: 3px;
				background: black;
				position: absolute;
				left: 157px;
				top: 158px;
				transform-origin: 80% top;
			}
		</style>
	</head>

	<body>
		<div id="data">
			<div id="fz"></div>
			<div id="mz"></div>
		</div>
		<script type="text/javascript">
			var oSec = document.getElementById("mz");

			function getNow() {
				now = new Date();
				var hour = now.getHours();
				var min = now.getMinutes();
				var sec = now.getSeconds();
				oSec.style.transform = "rotate(" + sec * 6 + "deg)";
				setTimeout(getNow, 1000);
			}
			getNow();
		</script>
	</body>

</html>