【コンパスクロック---html,js,cssで作成.ソースコードと効果付】


コード#コード#


罗盘效果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">
<title>js    title>
 
<link rel="stylesheet" href="demo.css" >
 
head>
<body> 
<div id="clock">div>
<script src="demo.js">script>
body>
html>

demo.css
*{
     
 margin:0;
 padding:0
}
html,body{
     
 width:100%;
 height:100%;
 background-color:#000;
 overflow:hidden
}
#clock{
     
 position:relative;
 width:100%;
 height:100%;
 background:#000
}
.label{
     
 display:inline-block;
 color:#4d4d4d;
 text-align:center;
 padding:0 5px;
 font-size:19px;
 transition:left 1s,top 1s;
 transform-origin:0% 0%
}

demo.js
var monthText=["  ","  ","  ","  ","  ","  ","  ","  ","  ","  ","   ","   "];
var dayText=["   ","   ","   ","   ","   ","   ","   ","   ","   ","  ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    "];
var weekText=["   ","   ","   ","   ","   ","   ","   "];
var hourText=["  ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","    ","    ","    "];
var minuteText=["   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   "];
var secondsText=["   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   ","    ","    ","    ","    ","    ","    ","    ","    ","    ","   "];
var clock;var monthList=[];
var dayList=[];
var weekList=[];
var hourList=[];
var minuteList=[];
var secondsList=[];
var isCircle=false;
var textSet=[[monthText,monthList],
[dayText,dayList],
[weekText,weekList],
[hourText,hourList],
[minuteText,minuteList],
[secondsText,secondsList]];
window.οnlοad=function()
{
 init();
 setInterval(function()
 {runTime();
 },100);
 changePosition();
 setTimeout(function()
 {changeCircle();
 },2000);
}
function init()
{clock=document.getElementById('clock');
for(var i=0;
 i

効果のデモ