틱톡 나침반 시계 전면 파일, css html js, 전체 네트워크 참조
25508 단어 취미
*{
margin:0;
padding:0;
background:rgb(111, 245, 93);
}
html,body{
width:100%;
height:100%;
overflow: hidden;
}
#clock {
position: relative;
width: 100%;
height: 100%;
}
.label{
display:inline-block;
text-align: center;
padding:5px 5px;
font-size:20px;
font-family: ;
transition:left 1s,top 1s;
transform-origin: 0 0;
}
js 소스:
let monthText = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
let dayText = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
let weekText = [" ", " ", " ", " ", " ", " ", " "];
let hourText = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
let minuteText = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
let secondText = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " ",
" ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
// dom
let monthList = [];
let dayList = [];
let weekList = [];
let hourList = [];
let minuteList = [];
let secondList = [];
//
let timeTextSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondText, secondList]
];
//
let isRotating = true;
//
let clock;
window.onload = function () {
init();
// 100ms
setInterval(function () {
runTime();
}, 100);
//
locateCurrent();
// 3
setTimeout(function () {
toRotate();
}, 3000);
}
//
function init() {
clock = document.getElementById('clock');
//
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
let temp = createLabel(timeTextSet[i][0][j]);
clock.appendChild(temp);
// list
timeTextSet[i][1].push(temp);
}
}
}
//
function createLabel(text) {
let div = document.createElement('div');
div.classList.add('label');
div.innerText = text;
return div;
}
function runTime() {
//
let now = new Date();
let month = now.getMonth();
let day = now.getDate();
let week = now.getDay();
let hour = now.getHours();
let minute = now.getMinutes();
let seconds = now.getSeconds();
//
initStyle();
//
//
let nowValue = [month, day - 1, week, hour, minute, seconds];
for (let i = 0; i < nowValue.length; i++) {
let num = nowValue[i];
timeTextSet[i][1][num].style.color = 'red';
}
//
if (isRotating) {
//
let widthMid = document.body.clientWidth / 2;
let heightMid = document.body.clientHeight / 2;
// dom
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
// x y ,
let r = (i + 1) * 35 + 50 * i;
// ,
let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]);
// dom
let x = r * Math.sin(deg * Math.PI / 180) + widthMid;
let y = heightMid - r * Math.cos(deg * Math.PI / 180);
//
let temp = timeTextSet[i][1][j];
temp.style.transform = 'rotate(' + (-90 + deg) + 'deg)';
temp.style.left = x + 'px';
temp.style.top = y + 'px';
}
}
}
}
function initStyle() {
//
let label = document.getElementsByClassName('label');
for (let i = 0; i < label.length; i++) {
label[i].style.color = 'black';
}
}
function locateCurrent() {
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][1].length; j++) {
// position left top
let tempX = timeTextSet[i][1][j].offsetLeft + "px";
let tempY = timeTextSet[i][1][j].offsetTop + "px";
// console.log(timeTextSet[i][1][j]);
// let
setTimeout(function () {
timeTextSet[i][1][j].style.position = "absolute";
timeTextSet[i][1][j].style.left = tempX;
timeTextSet[i][1][j].style.top = tempY;
}, 50);
}
}
}
function toRotate() {
isRotating = true;
clock.style.transform = "rotate(90deg)";
}
html 소스:
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
"X-UA-Compatible" content="ie=edge">
"stylesheet" href="clock.css">
"clock.js"</span>>
"clock">
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
사이트 정보 조회, 어떻게 실제 IP 와 사회 복지 사 를 찾 습 니까?1. 사이트 의 실제 IP 주 소 를 찾 아 CDN 가속 을 사 용 했 는 지 확인 하 세 요. 다음 두 사이트 가 비교적 좋 습 니 다. 도 메 인 이름 을 입력 한 후에 여러 개의 IP 주소 가 검출 되면 분명 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.