JavaScript罗盘时钟
<!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">
<title>罗盘时钟</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
background-color: #000;
overflow: hidden;
}
#clock {
position: relative;
width: 100%;
height: 100%;
background: black;
}
.label {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
color: #4d4d4d;
text-align: center;
padding: 0 5px;
font-size: 19px;
transition: all 1s;
transform: translate(-50%,-50%);
transform-origin: 0% 0%;
}
.now {
color: #fff;
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
var yearText=[''];var monthText=[];var dayText=[];var weekText=["星期日"];
var hourText=[];var minuteText=[];var secondsText=[];
for(var i=1;i<=12;i++){monthText.push(numberToChinese(i)+"月");}
for(var i=1;i<=31;i++){dayText.push(numberToChinese(i)+"号");}
for(var i=1;i<= 6;i++){weekText.push("星期"+numberToChinese(i));}
for(var i=0;i<=23;i++){hourText.push(numberToChinese(i)+"点");}
for(var i=0;i<=59;i++){minuteText.push(numberToChinese(i)+"分");}
for(var i=1;i<=60;i++){secondsText.push(numberToChinese(i)+"秒");}
console.log(monthText);console.log(dayText);console.log(weekText);
console.log(hourText);console.log(minuteText);console.log(secondsText);
var clock;var yearList=[];var monthList=[];var dayList=[];
var weekList=[];var hourList=[];var minuteList=[];var secondsList=[];
var textList=[[yearText,yearList],[monthText,monthList],[dayText,dayList],
[weekText,weekList],[hourText,hourList],[minuteText,minuteList],[secondsText,secondsList],]
window.onload=function(){init();
setTimeout(function(){initTransition();},0);
setTimeout(function(){var timeArr=[0,0,0,0,0,0,0];rotateTransition(timeArr);
setInterval(function(){runtime()},1000)},1000)};
function init(){
clock=document.querySelector('#clock');
for (var i in textList){
for (var j in textList[i][0]){
var temp=createLabel(textList[i][0][j]);
clock.appendChild(temp);textList[i][1].push(temp);}}console.log(textList);}
function createLabel(text){
var div=document.createElement('div');div.classList.add('label');div.innerText=text;return div;}
function runtime(){
var now=new Date();var month=now.getMonth();var day=now.getDate();
var week=now.getDay();var hour=now.getHours();var minute=now.getMinutes();
var seconds=now.getSeconds();
var timeArr=[0,month,day - 1,week,hour,minute,seconds]
console.log(timeArr);clearColor();rotateTransition(timeArr);addColor(timeArr);}
function addColor(timeArr){
for (var i=1; i < timeArr.length; i++){var index=timeArr[i];
textList[i][1][index].classList.add('now')}}
function clearColor(){
var now=document.querySelectorAll('.now');
now.forEach(function(item){item.classList.remove('now');})}
function initTransition(){
for (var i in textList){for (var item of textList[i][1]){
item.style.transform='translate('+i * 80+'px,-50%)'
item.style.transformOrigin=-(i * 80)+'px 50%';}}}
function rotateTransition(timeArr){
for (var i in textList){for (var j in textList[i][1]){
var temp=textList[i][1][j];var deg=360 / textList[i][0].length * (j - timeArr[i]);
temp.style.transform='translate('+i * 80+'px,-50%)'+' rotate('+deg+'deg)';}}}
function numberToChinese(num){//将数字0到10转换成汉字
const chineseNums=["零","一","二","三","四","五","六","七","八","九","十"];
if (num <= 10){//特殊处理11到19以及整十的情况
return chineseNums[num];
}else if(num < 20){
return "十"+(num === 10 ? "" : chineseNums[num - 10]);
}else if(num % 10 === 0){
return chineseNums[num / 10]+"十";
}else{
return chineseNums[Math.floor(num / 10)]+"十"+chineseNums[num % 10];
}
}
</script>
</body>
</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">
<title>罗盘时钟</title>
<style>
@font-face {
font-family:unidreamLED;
src:url('./UnidreamLED.ttf')
/* src:url("./UnidreamLED.ttf");
*/
}
body {
font-size:0px;
height:100%;
width:100%;
padding:0;
margin:0;
position:absolute;
display:flex;
justify-content:center;
align-items:center;
color:#cad6dd;
overflow:hidden;
background-color:#141929;
font-family:unidreamLED;
}
.NowData {
background-image:-webkit-linear-gradient(bottom,rgb(255 0 0),rgb(120 8 220));
background-size:100% 20px;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.yearBox {
height:10vh;
width:10vh;
position:absolute;
display:flex;
font-size:16px;
align-items:center;
justify-content:center;
border-radius:50%;
transition:1s;
background-image:-webkit-linear-gradient(bottom,rgb(255 0 0),rgb(120 8 220));
background-size:100% 20px;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.mounthBox {
height:25vh;
width:25vh;
position:absolute;
display:flex;
align-items:center;
border-radius:50%;
transition:1s;
}
.dayBox {
height:40vh;
width:40vh;
border-radius:50%;
display:flex;
align-items:center;
position:absolute;
transition:1s;
}
.hourBox {
height:55vh;
width:55vh;
position:absolute;
display:flex;
align-items:center;
transition:1s;
border-radius:50%;
}
.minuteBox {
height:70vh;
width:70vh;
position:absolute;
display:flex;
align-items:center;
border-radius:50%;
transition:1s;
}
.secondBox {
height:85vh;
width:85vh;
display:flex;
align-items:center;
position:absolute;
border-radius:50%;
transition:1s;
}
</style>
</head>
<body>
<div class="secondBox"></div>
<div class="minuteBox"></div>
<div class="hourBox"></div>
<div class="dayBox"></div>
<div class="mounthBox"></div>
<div class="yearBox"></div>
<script>
let sencond = ``
for (i = 0; i < 60; i++) {
let onediv = `<div id = "sencond${i+1}" style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i-1)*-6}deg);"> ${i+1} 秒</div>`
sencond = sencond + onediv
}
document.querySelector('.secondBox').innerHTML = sencond
let minute = ``
for (i = 0; i < 60; i++) {
let onediv = `<div id = "minute${i+1}" style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-6}deg);"> ${i+1} 分</div>`
minute = minute + onediv
}
document.querySelector('.minuteBox').innerHTML = minute
let hour = ``
for (i = 0; i < 24; i++) {
let onediv = `<div id = "hour${i+1}" style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-15}deg);"> ${i+1} 时</div>`
hour = hour + onediv
}
document.querySelector('.hourBox').innerHTML = hour
let day = ``
for (i = 0; i < 31; i++) {
let onediv = `<div id = "day${i+1}" style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-11.25}deg);"> ${i+1} 日</div>`
day = day + onediv
}
document.querySelector('.dayBox').innerHTML = day
let mounth = ``
for (i = 0; i < 12; i++) {
let onediv = `<div id = "mounth${i+1}" style="font-size: 16px;width: 100%;text-align: right;position: absolute;display: inline-block;transform: rotate(${(i)*-30}deg);"> ${i+1} 月</div>`
mounth = mounth + onediv
}
document.querySelector('.mounthBox').innerHTML = mounth
var sencond360 = 0
var Minute360 = 0
var hour360 = 0
var day360 = 0
var mounth360 = 0
var oldsencond = 0
var oldMinute = 0
var oldhour = 0
var oldday = 0
var oldmounth = 0
function transformBox() {
let nowDate = new Date()
let sencond = nowDate.getSeconds()
let minute = nowDate.getMinutes()
let hour = nowDate.getHours()
let day = nowDate.getDate()
let mounth = nowDate.getMonth()
let year = nowDate.getFullYear()
if (sencond === 0 && oldsencond !== sencond) {
sencond360 = sencond360 + 1
}
if (minute === 0 && oldMinute !== minute) {
Minute360 = Minute360 + 1
}
if (hour === 0 && oldhour !== hour) {
hour360 = hour360 + 1
}
if (day === 1 && oldday !== day) {
day360 = day360 + 1
}
if (mounth === 0 && oldmounth !== mounth) {
mounth360 = mounth360 + 1
}
document.querySelector('.secondBox').style.transform = `rotate(${sencond360*360 + (sencond-1)*6}deg)`
document.querySelector('.minuteBox').style.transform = `rotate(${Minute360*360 + (minute-1)*6}deg)`
document.querySelector('.hourBox').style.transform = `rotate(${hour360*360 + (hour-1)*15}deg)`
document.querySelector('.dayBox').style.transform = `rotate(${day360*360 + (day-1)*11.25}deg)`
document.querySelector('.mounthBox').style.transform = `rotate(${mounth360*360 + (mounth)*30}deg)`
document.querySelector('.yearBox').innerHTML = year + ' 年'
let nowDates = document.querySelectorAll('.NowData')
nowDates.forEach(element => {
element.classList = ''
});
document.querySelector(`#sencond${sencond+1}`).classList = 'NowData'
document.querySelector(`#minute${minute===0?'60':minute}`).classList = 'NowData'
document.querySelector(`#hour${hour===0?'24':hour}`).classList = 'NowData'
document.querySelector(`#day${day}`).classList = 'NowData'
document.querySelector(`#mounth${mounth+1}`).classList = 'NowData'
oldsencond = sencond
oldMinute = minute
oldhour = hour
oldday = day
oldmounth = mounth
}
transformBox()
setInterval(() => {
transformBox()
}, 1000);
</script>
</body>
</html>
