淘先锋技术网

首页 1 2 3 4 5 6 7

旋转时钟代码html

时钟作为日常生活中不可缺少的工具，对于编程爱好者来说，制作一个旋转时钟代码是一件有趣的事情。接下来，我们将使用HTML语言，来实现一个简单的旋转时钟代码。

<!DOCTYPE html>
<html>
<head>
    <title>旋转时钟代码</title>
    <style>
        #hours,
        #minutes,
        #seconds {
            height: 6px;
            width: 60px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 0 100%;
            transform: rotate(0deg);
        }

        #minutes {
            height: 3px;
            width: 70%;
            background-color: green;
            transform-origin: 0 100%;
        }

        #seconds {
            height: 2px;
            width: 80%;
            background-color: blue;
            transform-origin: 0 100%;
        }

        #center {
            height: 10px;
            width: 10px;
            background-color: black;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
    <div id="center"></div>
    <script>
        setInterval(function () {
            var now = new Date();
            var hoursDeg = now.getHours() * 30 - 90;
            var minutesDeg = now.getMinutes() * 6 - 90;
            var secondsDeg = now.getSeconds() * 6 - 90;
            document.getElementById('hours').style.transform = 'rotate(' + hoursDeg + 'deg)';
            document.getElementById('minutes').style.transform = 'rotate(' + minutesDeg + 'deg)';
            document.getElementById('seconds').style.transform = 'rotate(' + secondsDeg + 'deg)';
        }, 1000);
    </script>
</body>
</html>

旋转时钟代码html

以上代码中，我们使用了HTML和CSS来创建时钟的基础样式。在JavaScript部分，我们使用了setInterval函数来每隔1秒执行一次，获取当前时间并计算出小时、分钟和秒钟针的角度，并将其赋值给对应的HTML元素的style属性中的transform属性值，使时钟动态旋转。