html+js+css 罗盘时钟

已于 2023-04-26 19:36:33 修改
阅读量365 收藏 1
点赞数 3
文章标签： html javascript 前端
于 2023-04-26 19:15:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69113620/article/details/130392715
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <title>罗盘时钟</title>
    <style>
    #year {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#mouth {
    position: absolute;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#mouth li {
    position: absolute;
    width: 80px;
    height: 20px
}

#mouth ul {
    position: relative;
    left: -40px;
    top: -10px
}

#mouth ul li:nth-child(1) {
    transform: rotate(0deg) translateX(100px)
}

#mouth ul li:nth-child(2) {
    transform: rotate(30deg) translateX(100px)
}

#mouth ul li:nth-child(3) {
    transform: rotate(60deg) translateX(100px)
}

#mouth ul li:nth-child(4) {
    transform: rotate(90deg) translateX(100px)
}

#mouth ul li:nth-child(5) {
    transform: rotate(120deg) translateX(100px)
}

#mouth ul li:nth-child(6) {
    transform: rotate(150deg) translateX(100px)
}

#mouth ul li:nth-child(7) {
    transform: rotate(180deg) translateX(100px)
}

#mouth ul li:nth-child(8) {
    transform: rotate(210deg) translateX(100px)
}

#mouth ul li:nth-child(9) {
    transform: rotate(240deg) translateX(100px)
}

#mouth ul li:nth-child(10) {
    transform: rotate(270deg) translateX(100px)
}

#mouth ul li:nth-child(11) {
    transform: rotate(300deg) translateX(100px)
}

#mouth ul li:nth-child(12) {
    transform: rotate(330deg) translateX(100px)
}

#solar {
    position: absolute;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0);
    transition: all 5s;
    z-index: 50
}

#solar li {
    position: absolute;
    width: 80px;
    height: 20px;
    cursor: pointer
}

#solar ul {
    position: relative;
    left: -40px;
    top: -10px
}

#solar ul li:nth-child(1) {
    transform: rotate(22.5deg) translateX(210px)
}

#solar ul li:nth-child(2) {
    transform: rotate(37.5deg) translateX(210px)
}

#solar ul li:nth-child(3) {
    transform: rotate(52.5deg) translateX(210px)
}

#solar ul li:nth-child(4) {
    transform: rotate(67.5deg) translateX(210px)
}

#solar ul li:nth-child(5) {
    transform: rotate(82.5deg) translateX(210px)
}

#solar ul li:nth-child(6) {
    transform: rotate(97.5deg) translateX(210px)
}

#solar ul li:nth-child(7) {
    transform: rotate(112.5deg) translateX(210px)
}

#solar ul li:nth-child(8) {
    transform: rotate(127.5deg) translateX(210px)
}

#solar ul li:nth-child(9) {
    transform: rotate(142.5deg) translateX(210px)
}

#solar ul li:nth-child(10) {
    transform: rotate(157.5deg) translateX(210px)
}

#solar ul li:nth-child(11) {
    transform: rotate(172.5deg) translateX(210px)
}

#solar ul li:nth-child(12) {
    transform: rotate(187.5deg) translateX(210px)
}

#solar ul li:nth-child(13) {
    transform: rotate(202.5deg) translateX(210px)
}

#solar ul li:nth-child(14) {
    transform: rotate(217.5deg) translateX(210px)
}

#solar ul li:nth-child(15) {
    transform: rotate(232.5deg) translateX(210px)
}

#solar ul li:nth-child(16) {
    transform: rotate(247.5deg) translateX(210px)
}

#solar ul li:nth-child(17) {
    transform: rotate(262.5deg) translateX(210px)
}

#solar ul li:nth-child(18) {
    transform: rotate(277.5deg) translateX(210px)
}

#solar ul li:nth-child(19) {
    transform: rotate(292.5deg) translateX(210px)
}

#solar ul li:nth-child(20) {
    transform: rotate(307.5deg) translateX(210px)
}

#solar ul li:nth-child(21) {
    transform: rotate(322.5deg) translateX(210px)
}

#solar ul li:nth-child(22) {
    transform: rotate(337.5deg) translateX(210px)
}

#solar ul li:nth-child(23) {
    transform: rotate(352.5deg) translateX(210px)
}

#solar ul li:nth-child(24) {
    transform: rotate(367.5deg) translateX(210px)
}

#data {
    position: absolute;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#data li {
    position: absolute;
    width: 80px;
    height: 20px
}

#data ul {
    position: relative;
    left: -40px;
    top: -10px
}

#data ul li:nth-child(1) {
    transform: rotate(0) translateX(160px)
}

#data ul li:nth-child(2) {
    transform: rotate(11.25deg) translateX(160px)
}

#data ul li:nth-child(3) {
    transform: rotate(22.5deg) translateX(160px)
}

#data ul li:nth-child(4) {
    transform: rotate(33.75deg) translateX(160px)
}

#data ul li:nth-child(5) {
    transform: rotate(45deg) translateX(160px)
}

#data ul li:nth-child(6) {
    transform: rotate(56.25deg) translateX(160px)
}

#data ul li:nth-child(7) {
    transform: rotate(67.5deg) translateX(160px)
}

#data ul li:nth-child(8) {
    transform: rotate(78.75deg) translateX(160px)
}

#data ul li:nth-child(9) {
    transform: rotate(90deg) translateX(160px)
}

#data ul li:nth-child(10) {
    transform: rotate(101.25deg) translateX(160px)
}

#data ul li:nth-child(11) {
    transform: rotate(112.5deg) translateX(160px)
}

#data ul li:nth-child(12) {
    transform: rotate(123.75deg) translateX(160px)
}

#data ul li:nth-child(13) {
    transform: rotate(135deg) translateX(160px)
}

#data ul li:nth-child(14) {
    transform: rotate(146.25deg) translateX(160px)
}

#data ul li:nth-child(15) {
    transform: rotate(157.5deg) translateX(160px)
}

#data ul li:nth-child(16) {
    transform: rotate(168.75deg) translateX(160px)
}

#data ul li:nth-child(17) {
    transform: rotate(180deg) translateX(160px)
}

#data ul li:nth-child(18) {
    transform: rotate(191.25deg) translateX(160px)
}

#data ul li:nth-child(19) {
    transform: rotate(202.5deg) translateX(160px)
}

#data ul li:nth-child(20) {
    transform: rotate(213.75deg) translateX(160px)
}

#data ul li:nth-child(21) {
    transform: rotate(225deg) translateX(160px)
}

#data ul li:nth-child(22) {
    transform: rotate(236.25deg) translateX(160px)
}

#data ul li:nth-child(23) {
    transform: rotate(247.5deg) translateX(160px)
}

#data ul li:nth-child(24) {
    transform: rotate(258.75deg) translateX(160px)
}

#data ul li:nth-child(25) {
    transform: rotate(270deg) translateX(160px)
}

#data ul li:nth-child(26) {
    transform: rotate(281.25deg) translateX(160px)
}

#data ul li:nth-child(27) {
    transform: rotate(292.5deg) translateX(160px)
}

#data ul li:nth-child(28) {
    transform: rotate(303.75deg) translateX(160px)
}

#data ul li:nth-child(29) {
    transform: rotate(315deg) translateX(160px)
}

#data ul li:nth-child(30) {
    transform: rotate(326.25deg) translateX(160px)
}

#data ul li:nth-child(31) {
    transform: rotate(337.5deg) translateX(160px)
}

#AP {
    position: absolute;
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#AP li {
    position: absolute;
    width: 80px;
    height: 20px
}

#AP ul {
    position: relative;
    left: -40px;
    top: -10px
}

#AP ul li:nth-child(1) {
    transform: rotate(0deg) translateX(250px)
}

#AP ul li:nth-child(2) {
    transform: rotate(180deg) translateX(250px)
}
#message {
    position: absolute;
    width: 240px;
    height: 500px;
    right: -310px;
    font-size: 18px;
    color: #b4eeb4;
    font-family: fontOne;
    box-sizing: border-box
}

#message ul li {
    position: absolute;
    margin: 25px 3px;
    width: 18px;
    text-align: center;
    word-wrap: break-word;
    border: 1px solid #fff
}

#message ul li:nth-child(1) {
    right: 5px
}

#message ul li:nth-child(2) {
    right: 30px
}

#message ul li:nth-child(3) {
    right: 55px
}

#message ul li:nth-child(4) {
    right: 80px
}

#message ul li:nth-child(5) {
    right: 105px
}

#message ul li:nth-child(6) {
    right: 130px
}

#message ul li:nth-child(7) {
    right: 155px
}

#message ul li:nth-child(8) {
    right: 180px
}

#message ul li:nth-child(9) {
    right: 205px
}

#message ul li:nth-child(10) {
    right: 230px
}
* {
    padding: 0;
    margin: 0
}

body {
    background: #0e0008;
    overflow: hidden;
    color: #fff;
    font-size: 14px
}

#sum {
    width: 730px;
    height: 730px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -365px;
    margin-top: -365px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

li {
    text-align: center;
    list-style-type: none
}

#second {
    position: absolute;
    width: 600px;
    height: 600px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#second li {
    position: absolute;
    width: 80px;
    height: 20px
}

#second ul {
    position: relative;
    left: -40px;
    top: -10px
}

#minute {
    position: absolute;
    width: 500px;
    height: 500px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#minute li {
    position: absolute;
    width: 80px;
    height: 20px
}

#minute ul {
    position: relative;
    left: -40px;
    top: -10px
}

#hour {
    position: absolute;
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#hour li {
    position: absolute;
    width: 50px;
    height: 20px
}

#hour ul {
    position: relative;
    left: -25px;
    top: -10px
}

#shade {
    position: absolute;
    list-style-type: none;
    background: rgba(11, 87, 187, .7);
    width: 430px;
    height: 28px;
    left: 366px
}

#second ul li:nth-child(1) {
    transform: rotate(0) translateX(400px)
}

#second ul li:nth-child(2) {
    transform: rotate(6deg) translateX(400px)
}

#second ul li:nth-child(3) {
    transform: rotate(12deg) translateX(400px)
}

#second ul li:nth-child(4) {
    transform: rotate(18deg) translateX(400px)
}

#second ul li:nth-child(5) {
    transform: rotate(24deg) translateX(400px)
}

#second ul li:nth-child(6) {
    transform: rotate(30deg) translateX(400px)
}

#second ul li:nth-child(7) {
    transform: rotate(36deg) translateX(400px)
}

#second ul li:nth-child(8) {
    transform: rotate(42deg) translateX(400px)
}

#second ul li:nth-child(9) {
    transform: rotate(48deg) translateX(400px)
}

#second ul li:nth-child(10) {
    transform: rotate(54deg) translateX(400px)
}

#second ul li:nth-child(11) {
    transform: rotate(60deg) translateX(400px)
}

#second ul li:nth-child(12) {
    transform: rotate(66deg) translateX(400px)
}

#second ul li:nth-child(13) {
    transform: rotate(72deg) translateX(400px)
}

#second ul li:nth-child(14) {
    transform: rotate(78deg) translateX(400px)
}

#second ul li:nth-child(15) {
    transform: rotate(84deg) translateX(400px)
}

#second ul li:nth-child(16) {
    transform: rotate(90deg) translateX(400px)
}

#second ul li:nth-child(17) {
    transform: rotate(96deg) translateX(400px)
}

#second ul li:nth-child(18) {
    transform: rotate(102deg) translateX(400px)
}

#second ul li:nth-child(19) {
    transform: rotate(108deg) translateX(400px)
}

#second ul li:nth-child(20) {
    transform: rotate(114deg) translateX(400px)
}

#second ul li:nth-child(21) {
    transform: rotate(120deg) translateX(400px)
}

#second ul li:nth-child(22) {
    transform: rotate(126deg) translateX(400px)
}

#second ul li:nth-child(23) {
    transform: rotate(132deg) translateX(400px)
}

#second ul li:nth-child(24) {
    transform: rotate(138deg) translateX(400px)
}

#second ul li:nth-child(25) {
    transform: rotate(144deg) translateX(400px)
}

#second ul li:nth-child(26) {
    transform: rotate(150deg) translateX(400px)
}

#second ul li:nth-child(27) {
    transform: rotate(156deg) translateX(400px)
}

#second ul li:nth-child(28) {
    transform: rotate(162deg) translateX(400px)
}

#second ul li:nth-child(29) {
    transform: rotate(168deg) translateX(400px)
}

#second ul li:nth-child(30) {
    transform: rotate(174deg) translateX(400px)
}

#second ul li:nth-child(31) {
    transform: rotate(180deg) translateX(400px)
}

#second ul li:nth-child(32) {
    transform: rotate(186deg) translateX(400px)
}

#second ul li:nth-child(33) {
    transform: rotate(192deg) translateX(400px)
}

#second ul li:nth-child(34) {
    transform: rotate(198deg) translateX(400px)
}

#second ul li:nth-child(35) {
    transform: rotate(204deg) translateX(400px)
}

#second ul li:nth-child(36) {
    transform: rotate(210deg) translateX(400px)
}

#second ul li:nth-child(37) {
    transform: rotate(216deg) translateX(400px)
}

#second ul li:nth-child(38) {
    transform: rotate(222deg) translateX(400px)
}

#second ul li:nth-child(39) {
    transform: rotate(228deg) translateX(400px)
}

#second ul li:nth-child(40) {
    transform: rotate(234deg) translateX(400px)
}

#second ul li:nth-child(41) {
    transform: rotate(240deg) translateX(400px)
}

#second ul li:nth-child(42) {
    transform: rotate(246deg) translateX(400px)
}

#second ul li:nth-child(43) {
    transform: rotate(252deg) translateX(400px)
}

#second ul li:nth-child(44) {
    transform: rotate(258deg) translateX(400px)
}

#second ul li:nth-child(45) {
    transform: rotate(264deg) translateX(400px)
}

#second ul li:nth-child(46) {
    transform: rotate(270deg) translateX(400px)
}

#second ul li:nth-child(47) {
    transform: rotate(276deg) translateX(400px)
}

#second ul li:nth-child(48) {
    transform: rotate(282deg) translateX(400px)
}

#second ul li:nth-child(49) {
    transform: rotate(288deg) translateX(400px)
}

#second ul li:nth-child(50) {
    transform: rotate(294deg) translateX(400px)
}

#second ul li:nth-child(51) {
    transform: rotate(300deg) translateX(400px)
}

#second ul li:nth-child(52) {
    transform: rotate(306deg) translateX(400px)
}

#second ul li:nth-child(53) {
    transform: rotate(312deg) translateX(400px)
}

#second ul li:nth-child(54) {
    transform: rotate(318deg) translateX(400px)
}

#second ul li:nth-child(55) {
    transform: rotate(324deg) translateX(400px)
}

#second ul li:nth-child(56) {
    transform: rotate(330deg) translateX(400px)
}

#second ul li:nth-child(57) {
    transform: rotate(336deg) translateX(400px)
}

#second ul li:nth-child(58) {
    transform: rotate(342deg) translateX(400px)
}

#second ul li:nth-child(59) {
    transform: rotate(348deg) translateX(400px)
}

#second ul li:nth-child(60) {
    transform: rotate(354deg) translateX(400px)
}

#minute ul li:nth-child(1) {
    transform: rotate(0) translateX(340px)
}

#minute ul li:nth-child(2) {
    transform: rotate(6deg) translateX(340px)
}

#minute ul li:nth-child(3) {
    transform: rotate(12deg) translateX(340px)
}

#minute ul li:nth-child(4) {
    transform: rotate(18deg) translateX(340px)
}

#minute ul li:nth-child(5) {
    transform: rotate(24deg) translateX(340px)
}

#minute ul li:nth-child(6) {
    transform: rotate(30deg) translateX(340px)
}

#minute ul li:nth-child(7) {
    transform: rotate(36deg) translateX(340px)
}

#minute ul li:nth-child(8) {
    transform: rotate(42deg) translateX(340px)
}

#minute ul li:nth-child(9) {
    transform: rotate(48deg) translateX(340px)
}

#minute ul li:nth-child(10) {
    transform: rotate(54deg) translateX(340px)
}

#minute ul li:nth-child(11) {
    transform: rotate(60deg) translateX(340px)
}

#minute ul li:nth-child(12) {
    transform: rotate(66deg) translateX(340px)
}

#minute ul li:nth-child(13) {
    transform: rotate(72deg) translateX(340px)
}

#minute ul li:nth-child(14) {
    transform: rotate(78deg) translateX(340px)
}

#minute ul li:nth-child(15) {
    transform: rotate(84deg) translateX(340px)
}

#minute ul li:nth-child(16) {
    transform: rotate(90deg) translateX(340px)
}

#minute ul li:nth-child(17) {
    transform: rotate(96deg) translateX(340px)
}

#minute ul li:nth-child(18) {
    transform: rotate(102deg) translateX(340px)
}

#minute ul li:nth-child(19) {
    transform: rotate(108deg) translateX(340px)
}

#minute ul li:nth-child(20) {
    transform: rotate(114deg) translateX(340px)
}

#minute ul li:nth-child(21) {
    transform: rotate(120deg) translateX(340px)
}

#minute ul li:nth-child(22) {
    transform: rotate(126deg) translateX(340px)
}

#minute ul li:nth-child(23) {
    transform: rotate(132deg) translateX(340px)
}

#minute ul li:nth-child(24) {
    transform: rotate(138deg) translateX(340px)
}

#minute ul li:nth-child(25) {
    transform: rotate(144deg) translateX(340px)
}

#minute ul li:nth-child(26) {
    transform: rotate(150deg) translateX(340px)
}

#minute ul li:nth-child(27) {
    transform: rotate(156deg) translateX(340px)
}

#minute ul li:nth-child(28) {
    transform: rotate(162deg) translateX(340px)
}

#minute ul li:nth-child(29) {
    transform: rotate(168deg) translateX(340px)
}

#minute ul li:nth-child(30) {
    transform: rotate(174deg) translateX(340px)
}

#minute ul li:nth-child(31) {
    transform: rotate(180deg) translateX(340px)
}

#minute ul li:nth-child(32) {
    transform: rotate(186deg) translateX(340px)
}

#minute ul li:nth-child(33) {
    transform: rotate(192deg) translateX(340px)
}

#minute ul li:nth-child(34) {
    transform: rotate(198deg) translateX(340px)
}

#minute ul li:nth-child(35) {
    transform: rotate(204deg) translateX(340px)
}

#minute ul li:nth-child(36) {
    transform: rotate(210deg) translateX(340px)
}

#minute ul li:nth-child(37) {
    transform: rotate(216deg) translateX(340px)
}

#minute ul li:nth-child(38) {
    transform: rotate(222deg) translateX(340px)
}

#minute ul li:nth-child(39) {
    transform: rotate(228deg) translateX(340px)
}

#minute ul li:nth-child(40) {
    transform: rotate(234deg) translateX(340px)
}

#minute ul li:nth-child(41) {
    transform: rotate(240deg) translateX(340px)
}

#minute ul li:nth-child(42) {
    transform: rotate(246deg) translateX(340px)
}

#minute ul li:nth-child(43) {
    transform: rotate(252deg) translateX(340px)
}

#minute ul li:nth-child(44) {
    transform: rotate(258deg) translateX(340px)
}

#minute ul li:nth-child(45) {
    transform: rotate(264deg) translateX(340px)
}

#minute ul li:nth-child(46) {
    transform: rotate(270deg) translateX(340px)
}

#minute ul li:nth-child(47) {
    transform: rotate(276deg) translateX(340px)
}

#minute ul li:nth-child(48) {
    transform: rotate(282deg) translateX(340px)
}

#minute ul li:nth-child(49) {
    transform: rotate(288deg) translateX(340px)
}

#minute ul li:nth-child(50) {
    transform: rotate(294deg) translateX(340px)
}

#minute ul li:nth-child(51) {
    transform: rotate(300deg) translateX(340px)
}

#minute ul li:nth-child(52) {
    transform: rotate(306deg) translateX(340px)
}

#minute ul li:nth-child(53) {
    transform: rotate(312deg) translateX(340px)
}

#minute ul li:nth-child(54) {
    transform: rotate(318deg) translateX(340px)
}

#minute ul li:nth-child(55) {
    transform: rotate(324deg) translateX(340px)
}

#minute ul li:nth-child(56) {
    transform: rotate(330deg) translateX(340px)
}

#minute ul li:nth-child(57) {
    transform: rotate(336deg) translateX(340px)
}

#minute ul li:nth-child(58) {
    transform: rotate(342deg) translateX(340px)
}

#minute ul li:nth-child(59) {
    transform: rotate(348deg) translateX(340px)
}

#minute ul li:nth-child(60) {
    transform: rotate(354deg) translateX(340px)
}

#hour ul li:nth-child(1) {
    transform: rotate(0deg) translateX(290px)
}

#hour ul li:nth-child(2) {
    transform: rotate(30deg) translateX(290px)
}

#hour ul li:nth-child(3) {
    transform: rotate(60deg) translateX(290px)
}

#hour ul li:nth-child(4) {
    transform: rotate(90deg) translateX(290px)
}

#hour ul li:nth-child(5) {
    transform: rotate(120deg) translateX(290px)
}

#hour ul li:nth-child(6) {
    transform: rotate(150deg) translateX(290px)
}

#hour ul li:nth-child(7) {
    transform: rotate(180deg) translateX(290px)
}

#hour ul li:nth-child(8) {
    transform: rotate(210deg) translateX(290px)
}

#hour ul li:nth-child(9) {
    transform: rotate(240deg) translateX(290px)
}

#hour ul li:nth-child(10) {
    transform: rotate(270deg) translateX(290px)
}

#hour ul li:nth-child(11) {
    transform: rotate(300deg) translateX(290px)
}

#hour ul li:nth-child(12) {
    transform: rotate(330deg) translateX(290px)
}
    </style>
</head>
<style></style>

<body>
    <div id="sum">

        <div id="message">
            <ul>
                <li class="msgs" v-for="(item,index) in Arrays">{{item}}</li>
            </ul>
        </div>

        <li id="shade"></li>

        <div id="second">
            <ul>
                <li v-for="item in flag">
                    {{item}} </li>
            </ul>
        </div>

        <div id="minute">
            <ul>
                <li v-for="item in flag_minute">
                    {{item}} </li>
            </ul>
        </div>

        <div id="hour">
            <ul>
                <li v-for="item in flag_hour">
                    {{item}} </li>
            </ul>
        </div>

        <div id="year">
            <ul>
                <li id="yearAll">天祈</li>
            </ul>
        </div>

        <div id="mouth">
            <ul>
                <li v-for="item in flag_mouth">
                    {{item.name}} </li>
            </ul>
        </div>

        <div id="solar">
            <ul>
                <li v-for="(item,index) in flag_solar" :key="index" v-on:mouseover="showMsg(index)" v-on:mouseout="hideMsg()" class="mm">
                    {{item.name}} </li>
            </ul>
        </div>

        <div id="data">
            <ul>
                <li v-for="item in flag_data">
                    {{item.name}} </li>
            </ul>
        </div>

        <div id="AP">
            <ul>
                <li v-for="item in flag_AP">
                    {{item.name}} </li>
            </ul>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script>
const vm = new Vue({
    el: '#sum',
    data() {
        return {
            flag: ['零零零秒', '零零一秒', '零零二秒', '零零三秒', '零零四秒', '零零五秒', '零零六秒', '零零七秒', '零零八秒', '零零九秒', '零零十秒', '零十一秒', '零十二秒', '零十三秒', '零十四秒', '零十五秒', '零十六秒', '零十七秒', '零十八秒', '零十九秒', '零二十秒', '二十一秒', '二十二秒', '二十三秒', '二十四秒', '二十五秒', '二十六秒', '二十七秒', '二十八秒', '二十九秒', '零三十秒', '三十一秒', '三十二秒', '三十三秒', '三十四秒', '三十五秒', '三十六秒', '三十七秒', '三十八秒', '三十九秒', '零四十秒', '四十一秒', '四十二秒', '四十三秒', '四十四秒', '四十五秒', '四十六秒', '四十七秒', '四十八秒', '四十九秒', '零五十秒', '五十一秒', '五十二秒', '五十三秒', '五十四秒', '五十五秒', '五十六秒', '五十七秒', '五十八秒', '五十九秒'],
            flag_minute: ['零零零分', '零零一分', '零零二分', '零零三分', '零零四分', '零零五分', '零零六分', '零零七分', '零零八分', '零零九分', '零零十分', '零十一分', '零十二分', '零十三分', '零十四分', '零十五分', '零十六分', '零十七分', '零十八分', '零十九分', '零二十分', '二十一分', '二十二分', '二十三分', '二十四分', '二十五分', '二十六分', '二十七分', '二十八分', '二十九分', '零三十分', '三十一分', '三十二分', '三十三分', '三十四分', '三十五分', '三十六分', '三十七分', '三十八分', '三十九分', '零四十分', '四十一分', '四十二分', '四十三分', '四十四分', '四十五分', '四十六分', '四十七分', '四十八分', '四十九分', '零五十分', '五十一分', '五十二分', '五十三分', '五十四分', '五十五分', '五十六分', '五十七分', '五十八分', '五十九分'],
            flag_hour: ['十二时', '零一时', '零二时', '零三时', '零四时', '零五时', '零六时', '零七时', '零八时', '零九时', '零十时', '十一时'],
            flag_mouth: [{
                name: '零一月',
                flag: false
            }, {
                name: '零二月',
                flag: false
            }, {
                name: '零三月',
                flag: false
            }, {
                name: '零四月',
                flag: false
            }, {
                name: '零五月',
                flag: false
            }, {
                name: '零六月',
                flag: false
            }, {
                name: '零七月',
                flag: false
            }, {
                name: '零八月',
                flag: false
            }, {
                name: '零九月',
                flag: false
            }, {
                name: '零十月',
                flag: false
            }, {
                name: '十一月',
                flag: false
            }, {
                name: '十二月',
                flag: false
            }],
            flag_solar: [{
                name: '立春',
                flag: false,
                msg: ''
            }, {
                name: '雨水',
                flag: false,
                msg: ''
            }, {
                name: '惊蛰',
                flag: false,
                msg: ''
            }, {
                name: '春分',
                flag: false,
                msg: ''
            }, {
                name: '清明',
                flag: false,
                msg: ''
            }, {
                name: '谷雨',
                flag: false,
                msg: ''
            }, {
                name: '立夏',
                flag: false,
                msg: ''
            }, {
                name: '小满',
                flag: false,
                msg: ''
            }, {
                name: '芒种',
                flag: false,
                msg: ''
            }, {
                name: '夏至',
                flag: false,
                msg: ''
            }, {
                name: '小暑',
                flag: false,
                msg: ''
            }, {
                name: '大暑',
                flag: false,
                msg: ''
            }, {
                name: '立秋',
                flag: false,
                msg: ''
            }, {
                name: '处暑',
                flag: false,
                msg: ''
            }, {
                name: '白露',
                flag: false,
                msg: ''
            }, {
                name: '秋分',
                flag: false,
                msg: ''
            }, {
                name: '寒露',
                flag: false,
                msg: ''
            }, {
                name: '霜降',
                flag: false,
                msg: ''
            }, {
                name: '立冬',
                flag: false,
                msg: ''
            }, {
                name: '小雪',
                flag: false,
                msg: ''
            }, {
                name: '大雪',
                flag: false,
                msg: ''
            }, {
                name: '冬至',
                flag: false,
                msg: ''
            }, {
                name: '小寒',
                flag: false,
                msg: ''
            }, {
                name: '大寒',
                flag: false,
                msg: ''
            }],
            Arrays: [],
            flag_data: [{
                name: '零零一号',
                flag: false
            }, {
                name: '零零二号',
                flag: false
            }, {
                name: '零零三号',
                flag: false
            }, {
                name: '零零四号',
                flag: false
            }, {
                name: '零零五号',
                flag: false
            }, {
                name: '零零六号',
                flag: false
            }, {
                name: '零零七号',
                flag: false
            }, {
                name: '零零八号',
                flag: false
            }, {
                name: '零零九号',
                flag: false
            }, {
                name: '零零十号',
                flag: false
            }, {
                name: '零十一号',
                flag: false
            }, {
                name: '零十二号',
                flag: false
            }, {
                name: '零十三号',
                flag: false
            }, {
                name: '零十四号',
                flag: false
            }, {
                name: '零十五号',
                flag: false
            }, {
                name: '零十六号',
                flag: false
            }, {
                name: '零十七号',
                flag: false
            }, {
                name: '零十八号',
                flag: false
            }, {
                name: '零十九号',
                flag: false
            }, {
                name: '零二十号',
                flag: false
            }, {
                name: '二十一号',
                flag: false
            }, {
                name: '二十二号',
                flag: false
            }, {
                name: '二十三号',
                flag: false
            }, {
                name: '二十四号',
                flag: false
            }, {
                name: '二十五号',
                flag: false
            }, {
                name: '二十六号',
                flag: false
            }, {
                name: '二十七号',
                flag: false
            }, {
                name: '二十八号',
                flag: false
            }, {
                name: '二十九号 ',
                flag: false
            }, {
                name: '零三十号 ',
                flag: false
            }, {
                name: '三十一号 ',
                flag: false
            }],
            flag_AP: [{
                name: '上午'
            }, {
                name: '下午'
            }],
            NllNumber: []
        }
    },
    methods: {
        showMsg: function(index) {
            var this_ = this
            var sum = this_.flag_solar
            var a = 0
            var b = 12
            var newObject
            var strings = sum[index].msg
            var arrayy = strings.split('')
            var length = arrayy.length
            var arrayOne
            var stringOne = ''
            for (var i = 0; i < 10; i++) {
                arrayOne = arrayy.slice(a, b)
                if (arrayOne.length !== 0) {
                    stringOne = arrayOne.join()
                    newObject = stringOne.replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '')
                    this.Arrays.push(newObject)
                }
                if (i === 0) {
                    a += 12
                    b += 20
                } else {
                    a += 20
                    b += 20
                }
            }
        },
        hideMsg: function() {
            this.Arrays = []
            this.NllNumber = []
        }
    }
})
var number = 0

function sell() {
    var data = new Date()
    var second = data.getSeconds() + 1
    number = second * -6
    document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')
    var myVar = setInterval(function() {
        sell_one()
    }, 1000)
}

function sell_one() {
    document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')
    number += -6
}
sell()
var number_minute = 0

function minutes() {
    var myVar = setInterval(function() {
        sell_two()
    }, 1000)
}

function sell_two() {
    var data = new Date()
    var minute = data.getMinutes()
    number_minute = minute * -6
    document.getElementById('minute').style.webkitTransform = 'rotate' + '(' + number_minute + 'deg)'
}
minutes()
var number_hour = 0

function hours() {
    var myVar = setInterval(function() {
        sell_three()
    }, 1000)
}

function sell_three() {
    var data = new Date()
    var hour = data.getHours()
    number_hour = hour * -30
    document.getElementById('hour').style.webkitTransform = 'rotate' + '(' + number_hour + 'deg)'
}
hours()

function year() {
    var data = new Date()
    var year = data.getFullYear()
    document.getElementById('yearAll').innerHTML = year + '年'
}
year()

function solarAndMouth() {
    var data = new Date()
    var mouth = data.getMonth()
    var number_mouth = mouth * -30
    document.getElementById('mouth').style.webkitTransform = 'rotate' + '(' + number_mouth + 'deg)'
    document.getElementById('solar').style.webkitTransform = 'rotate' + '(' + number_mouth + 'deg)'
}
solarAndMouth()

function dates() {
    var data = new Date()
    var date = data.getDate()
    var number_date = date * -11.25 + 11.25
    document.getElementById('data').style.webkitTransform = 'rotate' + '(' + number_date + 'deg)'
}
dates()

function APS() {
    var data = new Date()
    var ap = data.getHours()
    if (ap > 12) {
        document.getElementById('AP').style.webkitTransform = 'rotate(180deg)'
    } else {
        document.getElementById('AP').style.webkitTransform = 'rotate(0deg)'
    }
}
APS()
</script>
</html>

Henny-龘
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
罗盘时钟.html
07-24
原生js制作一款在抖音上很火的文字罗盘布局时钟代码。带月份、星期、时分秒圆盘时钟，酷炫效果，
html5罗盘时钟
06-12
html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
罗盘时钟——使用html，js，css编写
m0_57202083的博客
09-03 1万+
罗盘效果.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="style.
【罗盘时钟（星空版）---使用html,js,css编写。（附全部源代码
最新发布
2301_82243710的博客
07-05 619
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》});},100);整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》
html罗盘时钟的代码
一直豚桑的博客
04-21 1055
【代码】html罗盘时钟的代码。
js date 加一天_web前端入门到实战：纯js时钟特效
weixin_39969060的博客
11-15 413
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示：<div id="clock" class="clock_con"></div><!-...
html+css+js实现罗盘时钟
03-18
本项目“html+css+js实现罗盘时钟”利用这三种语言的特性，创建了一个能够实时显示当前时间的动态罗盘时钟。接下来，我们将详细探讨这个项目中涉及的关键知识点。 首先，HTML（HyperText Markup Language）作为网页...
html+css+javascript实现抖音最火的罗盘时钟源码，时钟数字罗盘
06-01
在本项目中，我们探讨的是如何使用HTML、CSS和JavaScript技术来实现一个具有抖音热门特色的罗盘时钟。这个时钟不仅具有独特的视觉效果，而且是动态更新的，能够实时显示当前时间。以下是对实现这一功能所需的关键...
html+css实心罗盘时钟特效
06-28
在本项目中，我们主要探讨如何使用HTML和CSS创建一个具有实心罗盘时钟特效的网页。这个项目包括了三种不同的时钟样式：罗盘时钟、八卦时钟和炫酷时钟，旨在通过动态效果提升用户体验。下面将详细介绍其中涉及的关键...
时间罗盘（HTML+css+js）.zip
03-15
抖音网红的时间罗盘不是粗编乱造，并在css和js上进行注释方便学习 html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化...动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
html,js，css--罗盘时钟.rar
11-20
总的来说，"html,js，css--罗盘时钟.rar"资源提供了一个有趣的前端开发练习，它结合了HTML、CSS和JavaScript的基本原理，展示了如何将静态的网页元素转化为生动的互动体验。无论是新手还是经验丰富的开发者，都能...
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
09-18
时钟罗盘（HTML时钟罗盘代码，老师发的学习案例）
罗盘时钟HTML源码下载
07-09
罗盘时钟
html5罗盘时钟.zip
01-14
html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
时间罗盘(类型八卦的时间罗盘).zip
02-13
类型八卦的时间罗盘，在抖音、快手上有机会看到的，特意花点时间做了一个，有兴趣的小伙伴可以下载研究，解压密码为：1qaz@WSX，好用请多支持！
CSS3和Html5实现超级炫酷的风水罗盘效果
11-03
CSS3和Html5实现超级炫酷的风水罗盘效果 CSS3和Html5实现超级炫酷的风水罗盘效果
【罗盘时钟（星空版）---使用html,js,css编写。（附全部源代码+效果）】
m0_66557301的博客
03-06 1344
目录 效果 源代码 效果 换个背景： 源代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSDN---追梦者</title> <link rel="stylesheet" href="css/clock.css"> </head> <body> <ul cl
抖音上的时钟屏保，被我改造完用来表白
热门推荐
漫漫前端路，进一寸有进一寸的欢喜
04-08 1万+
抖音上很火的时钟屏保，被我改造完后用来准备准备准备表白，谁说程序员不浪漫？！ 闲言少叙，书归正文，因为gif格式的图片只能上传5M，所以我只能切成两块，中间还删减了一些，大家凑合着看，不要打我，大家可以把源码拷下来，源码在最下面，自己运行康康，嘿嘿，话不多说，上图： 效果主要分成了三个部分，第一个是进入页面的时候平铺的时钟效果，当点击按钮的时候，变为圆盘时钟，左边的文字以键盘敲击的而方式出现...
制作网红时钟罗盘：HTML与JS实现
这个时钟罗盘的制作过程涉及到前端开发的基本技能，包括HTML布局、CSS样式以及JavaScript编程。通过这样的项目实践，开发者不仅可以提升自己的技术能力，还能理解如何将静态网页元素转化为动态的、与现实世界互动的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值