- 科技
- css3+js实现时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
width: 445px;
height: 445px;
border-radius: 50%;
background: url(img/clock.png) no-repeat;
position: relative;
}
.box>div {
position: absolute;
}
.hour {
width: 24px;
height: 108px;
background: url(img/h.png) no-repeat center center;
transform-origin: 12px 97px;
top: 129px;
left: 208px;
}
.m {
width: 24px;
height: 142px;
background: url(img/m.png) no-repeat center center;
transform-origin: 12px 131px;
top: 96px;
left: 208px;
}
.s {
width: 14px;
height: 160px;
background: url(img/s.png) no-repeat center center;
transform-origin: 8px 146px;
top: 80px;
left: 213px;
}
</style>
<body>
<div class="box">
<div class="hour"></div>
<div class="m"></div>
<div class="s"></div>
</div>
<script type="text/javascript">
function fun() {
var date = new Date();
document.querySelector('.s').style.transform = 'rotate(' + date.getSeconds() * 6 + 'deg )';
var min = date.getMinutes() * 6 + date.getSeconds() / 60 * 6;
document.querySelector('.m').style.transform = 'rotate(' + min + 'deg ) ';
var hour = (date.getHours() % 12) * 30 + date.getMinutes() / 60 * 30;
document.querySelector('.hour').style.transform = 'rotate(' + hour + 'deg ) ';
}
setInterval(fun, 1000)
</script>
</body>
</html>
Processed:
0.012, SQL:
8
