A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© jonelee 初级黑马   /  2019-4-25 17:21  /  921 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" href="./css/normalize.css"> -->
    <!-- <link rel="stylesheet" href="./css/lee_index.css"> -->
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="witch">
        <div>
            <div class="dot"></div>
            <div class="sz"></div>
            <div class="fz"></div>
            <div class="mz"></div>
            <!-- 表盘刻度 -->
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
            <span class="kedu"></span>
        </div>
    </div>
    <div class="box">
        <div class="num_witch">
            <input type="text" value="00" id="hour">:
            <input type="text" value="00" id="min">:
            <input type="text" value="00" id="sec">
        </div>

    </div>


    <script>
        var sz = document.querySelector(".sz");
        var fz = document.querySelector(".fz");
        var mz = document.querySelector(".mz");
        var hour = document.querySelector("#hour");
        var min = document.querySelector("#min");
        var sec = document.querySelector("#sec");

        // 获取刻度
        var kedu = document.querySelectorAll(".kedu");

        // 旋转刻度
        for (let i = 0; i < kedu.length; i++) {
            kedu[i].style.transform = "rotate(" + i * 30 + "deg)";
        }

        function gettTime() {
            var date = new Date();
            var hours = date.getHours();
            var mins = date.getMinutes();
            var seconds = date.getSeconds();

            if (seconds % 60 == 0) {
                mz.style.transform = "rotate(-90deg)";

            }
            if (mins % 60 == 0) {
                fz.style.transform = "rotate(-90deg)";

            }
            if (hours % 12 == 0) {
                sz.style.transform = "rotate(-90deg)";

            }
            sz.style.transform = "rotate(" + (30 * (hours % 12) - 90 + (1 / 12) * mins) + "deg)";
            fz.style.transform = "rotate(" + (6 * mins - 90 + 0.1 * seconds) + "deg)";
            mz.style.transform = "rotate(" + (6 * seconds - 90) + "deg)";

            if (hours < 10) {
                hours = "0" + hours;
            }
            if (mins < 10) {
                mins = "0" + mins;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            hour.setAttribute("value", hours);
            min.setAttribute("value", mins);
            sec.setAttribute("value", seconds);

        }
        setInterval(gettTime, 1000);
    </script>
</body>
<style>
    body {
    background-color: (255, 255, 255);
}

.witch {
    position: relative;
    width: 200px;
    height: 200px;
    border: 10px solid #000;
    border-radius: 50%;
    background-color: transparent;
    margin: 0 auto;

   
}
.witch div:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin: auto auto;
    background-color: #fff;
    /* background-color: transparent; */
    box-shadow: 0 0 20px rgba(115, 115, 115, 0.387);


}

.dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    /* height: 20px; */
    height: 20px;
    border-radius: 50%;
    background-color: #000;

}

.sz {
    position: absolute;
    left: 100px;
    top: 96px;
    width: 40px;
    height: 6px;
    background-color: #000;
    transform-origin: 0 3px;
    transform: rotate(-90deg);
    /* transition: transform 1s linear; */


    /* transform: ra */

}

.fz {
    position: absolute;
    left: 100px;
    top: 97px;
    width: 55px;
    height: 4px;
    background-color: #000;
    transform-origin: 0 2px;
    transform: rotate(-90deg);
    /* transition: transform 1s linear; */



}

.mz {
    position: absolute;
    left: 100px;
    top: 98px;
    width: 70px;
    height:2px;
    background-color: #000;
    transform-origin: 0 1px;
    transform: rotate(-90deg);
    /* transition: transform 1s linear; */



}
.kedu {
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 0 100px;
    transform: rotate(0);

    width: 2px;
    height: 16px;
    background-color: #000;
}

/* 数字时间 */
.box {
    margin-top: 10px;

}
.num_witch {
    display: flex;
    justify-content: space-around;
    width: 100px;
    height: 30px;
    margin: 0 auto;
    color: #000;
}
.num_witch input {
    width: 20px;
    text-align: center;
}

</style>

</html>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马