<!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>
html+js+css 罗盘时钟
于 2023-04-26 19:15:51 首次发布