Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
1. watch timer
is first prepared image
points second needle
inserted here described image
codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计时器</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
}
#clock {
background: url(1.jpg) no-repeat center center;
position: absolute;
z-index: 1;
}
#hour {
background: url(hour.png) no-repeat center center;
position: absolute;
z-index: 2
}
#minute {
background: url(minute.png) no-repeat center center;
position: absolute;
z-index: 3;
}
#second {
background: url(second.png) no-repeat center center;
position: absolute;
z-index: 4;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script type="text/javascript">
window.onload = function () {
var oh = document.getElementById("hour");
var om = document.getElementById("minute");
var os = document.getElementById("second");
function go() {
var time = new Date();
var H = time.getHours() + time.getMinutes()
var M = time.getMinutes();
var S = time.getSeconds() + time.getMilliseconds()
os.style.transform = 'rotate(' + S * 6 + 'deg)';
om.style.transform = 'rotate(' + M * 6 + 'deg)';
oh.style.transform = 'rotate(' + H * 30 + 'deg)';
}
go();
setInterval(go, 1000);
}
</script>
</body>
</html>
```java