您的位置：首页 > Web前端

网页简单闹钟效果

2017-02-20 00:00 281 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>网页闹钟</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:14px;font-family:"微软雅黑";color:#666;background:#E2E2E2;}
/* start timerbox */
.timerbox{width:400px;height:400px;margin:0 auto;}
.timerbox .box{width:200px;height:200px;border:4px solid #E2E2E2;border-radius:50%;position:relative;left:100px;top:100px;}
.timerbox .box #radius{position:absolute;width:20px;height:20px;top:90px;left:90px;background:#111;border-radius:50%;}
.timerbox .box #hour{position:absolute;height:45px;width:8px;background:#111;left:96px;top:55px;transform-origin:bottom;}
.timerbox .box #min{position:absolute;height:60px;width:4px;background:green;left:98px;top:40px;transform-origin:bottom;}
.timerbox .box #sec{position:absolute;height:80px;width:2px;background:red;left:99px;top:20px;transform-origin:bottom;}
.timerbox .box ul li{list-style:none;background:#111;width:2px;height:5px;position:absolute;left:99px;
transform-origin:center 100px;}
.timerbox .box ul li:nth-child(5n+1){height:15px;}
/* timerbox end */
</style>
</head>
<body>

<div class="timerbox">
<div class="box">
<ul id="kedu">
<li></li>
</ul>
<div id="radius"></div>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
</div>
</div>


<script type="text/javascript">
(function() {
var keduDom = document.getElementById("kedu");
var html="";
for (var i = 0; i < 60; i++) {
html += "<li style='transform:rotate(" + (i * 6) + "deg)'></li>"
}
keduDom.innerHTML = html;
var secDom = document.getElementById("sec");
var minDom = document.getElementById("min");
var hourDom = document.getElementById("hour");
function drawDate() {
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes() + sec / 60;
var hour = date.getHours() + min / 60;
secDom.style.transform = "rotate(" + sec * 6 + "deg)";
minDom.style.transform = "rotate(" + min * 6 + "deg)";
hourDom.style.transform = "rotate(" + hour * 30 + "deg)";
}
drawDate();
setInterval(drawDate, 1000);
})();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Web前端网页闹钟效果

相关文章推荐

新的分享

章节导航