[JavaScript知识库] DOM案例-结合CSS绘制钟表

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> DOM案例-结合CSS绘制钟表 -> 正文阅读

[JavaScript知识库]DOM案例-结合CSS绘制钟表

在这里插入图片描述

点此查看预览效果：https://qianduanmao.com/demo/dom/node/2-biao.html
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #app{
            width:400px;
            height: 400px;
            border:2px solid black;
            margin:0px auto;
            border-radius: 100%;
            position: relative;
        }
        .kedu{
            position: absolute;
            top:0;
            /*(400-4)/2*/
            left:198px;
            width: 4px;
            height:20px;
            background:black;
            transform-origin: 2px 200px;
        }
        .timeDiv{
            position: absolute;
            /*(400-宽40）/2*/
            left:180px;
            /*刻度的高度*/
            top:30px;
            width: 40px;
            height:170px;
            /*background: red;*/
            transform-origin: bottom;
            font-size:25px;
        }
        /*时针*/
        .hour{
            position: absolute;
            width: 6px;
            left:197px;
            top:130px;
            height: 70px;
            background: green;
            transform-origin: bottom;
        }
        /*分针*/
        .min{
            position: absolute;
            width: 4px;
            left:198px;
            top:100px;
            height: 100px;
            background: skyblue;
            transform-origin: bottom;
        }
        /*秒针*/
        .sec{
            position: absolute;
            width: 2px;
            left:199px;
            top:60px;
            height: 140px;
            background: red;
            transform-origin: bottom;
        }
        .origin{
            position:absolute;
            width: 20px;
            height: 20px;
            background: black;
            top:190px;
            left:190px;
            border-radius: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="origin"></div>
    </div>
</body>
<script>
    var app = document.querySelector("#app");

    // 让时分秒动起来：
    var hour = document.querySelector(".hour");
    var min = document.querySelector(".min");
    var sec = document.querySelector(".sec");

    init();
    function init(){
        // 获得当前时间
        var date = new Date();
        var h = date.getHours();// 小时
        var m = date.getMinutes();// 分
        var s = date.getSeconds();// 秒

        // 1- 每小时占30度
        // 2- 每小时共60分钟
        // 由以上两点可以得出：每分钟占用 30/60 = 0.5

        // 1-每分钟占6度
        // 2-每分钟有60秒
        // 由以上两点可以得出：每秒钟占用 6/60=0.1
        hour.style.transform = "rotateZ("+(h*30+m*0.5)+"deg)";// 360/12
        min.style.transform = "rotateZ("+(m*6+s*0.1)+"deg)";// 360/60
        sec.style.transform = "rotateZ("+s*6+"deg)";// 360/60
    }

    setInterval(init,1000);

    // 1- 增加刻度
    for(var i=0;i<60;i++){
        // 创建div元素
        var div = document.createElement("div");
        // 为div增加样式
        div.className = "kedu";
        // 旋转
        div.style.transform = "rotateZ("+i*6+"deg)";
        // 判断是否被5整除
        if(i%5===0){
            div.style.height = "30px"
        }
        // 将创建的元素div放到app元素的尾部
        app.appendChild(div);
    }
    // 2- 增加时间
    for(var i=1;i<=12;i++){
        var timeDiv = document.createElement("div");
        timeDiv.className = "timeDiv";
        timeDiv.style.transform = "rotateZ("+i*30+"deg)"

        var numDiv = document.createElement("div");
        numDiv.innerHTML = i;
        numDiv.style.transform = "rotateZ("+(-i*30)+"deg)";
        numDiv.style.textAlign="center";
        timeDiv.appendChild(numDiv)
        app.appendChild(timeDiv);
    }
</script>
</html>