网页简单闹钟效果

最新推荐文章于 2022-01-18 13:24:54 发布

山海紫穹

最新推荐文章于 2022-01-18 13:24:54 发布

阅读量138

点赞数 1

分类专栏：前端技术文章标签： css html js css3 web

本文链接：https://blog.csdn.net/purplesky95/article/details/114633995

版权

前端技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

<!-- start timerbox -->
<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>

<!-- timerbox end -->
<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>