时针

最新推荐文章于 2019-09-04 10:03:40 发布

原创最新推荐文章于 2019-09-04 10:03:40 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

27 篇文章

订阅专栏

html

12 篇文章

订阅专栏

css

11 篇文章

订阅专栏

博客围绕时针展开，但内容未提供更多关键信息。推测可能会涉及时针在计时等方面的相关内容，不过目前信息有限。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

时针

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #wrap{
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background: #f0f0f0;
        }
        #hour{
            position: absolute;
            top:90px;
            left: 147px;
            width: 6px;
            height: 60px;
            background: #000;
            transform-origin: 3px 60px;
        }
        #min{
            position: absolute;
            top:70px;
            left: 148px;
            width: 4px;
            height: 80px;
            background: #000;
            transform-origin: 2px 80px;
        }
        #sec{
            position: absolute;
            top:50px;
            left: 149px;
            width: 2px;
            height: 100px;
            background: deeppink;
            transform-origin: 1px 100px;
        }
        #icon{
            position: absolute;
            top:140px;
            left: 140px;
            width: 20px;
            height: 20px;
            background: yellowgreen;
            border-radius: 50%;
        }
        #list{
            position: relative;
            left: 149px;
            top:0;
            list-style: none;
        }
        #list li{
            position: absolute;
            top:0;
            left: 0;
            width: 2px;
            height: 8px;
            background: #000;
            transform-origin: 1px 150px;
        }
        #list li:nth-child(5n+1){
            width: 4px;
            height: 12px;
            transform-origin: 2px 150px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="icon"></div>
    <!--刻度-->
    <ul id="list"></ul>
</div>
</body>
<script type="text/javascript">
    var list = document.getElementById('list');
    var num = 60;
    for (var i = 0; i < num; i++) {
        //创建li
        var li = document.createElement('li');
        li.style.transform = 'rotate('+ (6*i) +'deg)';
        list.appendChild(li);
    };

    //动起来
    var hourDom = document.getElementById('hour');
    var minDom = document.getElementById('min');
    var secDom =  document.getElementById('sec');
    setInterval(function () {
        var date = new Date();
        //秒
        var sec = date.getSeconds();
        //分钟
        var min = date.getMinutes();
        min = min + sec/60;
        //小时
        var hour = date.getHours();
        hour += min/60;
        //制定旋转度数
        hourDom.style.transform = 'rotate('+ (hour*30) +'deg)';
        minDom.style.transform = 'rotate('+ (min*6)+'deg)';
        secDom.style.transform = 'rotate('+ (sec*6) +'deg)';
    },1000);
</script>
</html>