js高仿抖音很火的网红罗盘汉字云时钟

1,583 阅读3分钟

抖音时钟

演示地址:www.coolivan.com/625

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<!-- <link rel="stylesheet" href="css/style.css"> -->
	<style>
		* {
			padding: 0;
			height: 0
		}

		body {
			background: #eeeeee;
			overflow: hidden
		}

		#app {
			background: white;
			font-size: 12px;
			color: gray;
			width: 900px;
			height: 900px;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%)
		}

		#app ul {
			padding: 0;
			margin: 0;
			position: absolute;
			border-radius: 50%;
			/* transition:.5s; */
		}

		#app li {
			margin-top: -0.5em;
			list-style: none;
			position: absolute;
			width: 100%;
			height: 1em;
			top: 50%;
			text-align: right
		}

		#app .current {
			font-weight: bold;
			color: black
		}

		#app .year {
			width: 5em;
			height: 1em;
			line-height: 1em;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%)
		}

		#app .seconds {
			z-index: 1;
			width: 92%;
			height: 92%;
			left: 4%;
			top: 4%
		}

		#app .minutes {
			z-index: 2;
			width: 78%;
			height: 78%;
			left: 11%;
			top: 11%
		}

		#app .hours {
			z-index: 3;
			width: 66%;
			height: 66%;
			left: 17%;
			top: 17%
		}

		#app .periods {
			z-index: 4;
			width: 52%;
			height: 52%;
			left: 24%;
			top: 24%
		}

		#app .weeks {
			z-index: 5;
			width: 44%;
			height: 44%;
			left: 28%;
			top: 28%
		}

		#app .days {
			z-index: 6;
			width: 34%;
			height: 34%;
			left: 33%;
			top: 33%
		}

		#app .months {
			z-index: 7;
			width: 20%;
			height: 20%;
			left: 40%;
			top: 40%
		}

		#app::before {
			content: '';
			display: block;
			width: 100%;
			height: 1px;
			border-bottom: 1px dashed gray;
			top: 50%;
			position: absolute;
			z-index: -1;
			opacity: 0.2
		}

		#app::after {
			content: '';
			display: block;
			height: 100%;
			width: 1px;
			border-left: 1px dashed gray;
			left: 50%;
			position: absolute;
			z-index: -1;
			opacity: 0.2
		}
	</style>
</head>

<body>
	<div id="app" class="clock">
		<div class="year current"></div>
		<ul class="months"></ul>
		<ul class="days"></ul>
		<ul class="weeks"></ul>
		<ul class="periods"></ul>
		<ul class="hours"></ul>
		<ul class="minutes"></ul>
		<ul class="seconds"></ul>
		<div class="h"></div>
		<div class="v"></div>
	</div>


	<script>
		{
			let clock = document.querySelector('.clock');
			let app = document.querySelector('#app');
			let year = app.querySelector('.year');
			let months = app.querySelector('.months');
			let days = app.querySelector('.days');
			let weeks = app.querySelector('.weeks');
			let periods = app.querySelector('.periods');
			let hours = app.querySelector('.hours');
			let minutes = app.querySelector('.minutes');
			let seconds = app.querySelector('.seconds');
			let periodsText = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戊', '亥'];
			let d = new Date();
			let now = {
				y: d.getFullYear(),
				m: d.getMonth(),
				a: d.getDate(),
				w: d.getDay(),
				p: Math.floor(((d.getHours() + 1) % 24) / 2),
				h: d.getHours(),
				i: d.getMinutes(),
				s: d.getSeconds(),
			}
			// 这个月有多少天
			let howManyDates = new Date(now.y,now.m+1,0).getDate();

			render();
			function render() {
				renderYear()
				renderSeconds()
				renderMinutes()
				renderHours()
				renderPeriods()
				renderWeeks()
				renderDays()
				renderMonths()
			}



			setInterval(() => {
				d = new Date();
				now = {
					y: d.getFullYear(),
					m: d.getMonth(),
					a: d.getDate(),
					w: d.getDay(),
					p: Math.floor(((d.getHours() + 1) % 24) / 2),
					h: d.getHours(),
					i: d.getMinutes(),
					s: d.getSeconds()
				}
				render();
			}, 1000);

			console.log(now)


			function renderYear() {
				let year = document.createElement('div');
				year.className = 'year';
				year.innerHTML = toCN(now.y) + '年';
				clock.appendChild(year)
			}
			function renderSeconds() {
				let html = '';
				for (let i = 0; i < 60; i++) {
					html += `<li class="${i === now.s ? 'current' : ''}" style="transform:rotate(${-360 / 60 * i}deg)">${toCN(i)}秒</li>`
				}
				seconds.style.transform = `rotate(${360 / 60 * now.s}deg)`
				seconds.innerHTML = html;
			}

			function renderMinutes() {
				let html = '';
				for (let i = 0; i < 60; i++) {
					html += `<li class="${i === now.i ? 'current' : ''}" style="transform:rotate(${-360 / 60 * i}deg)">${toCN(i)}分</li>`
				}
				minutes.style.transform = `rotate(${360 / 60 * now.i}deg)`
				minutes.innerHTML = html;
			}

			function renderHours() {
				let html = '';
				for (let i = 0; i < 24; i++) {
					html += `<li class="${i === now.h ? 'current' : ''}" style="transform:rotate(${-360 / 24 * i}deg)">${toCN(i)}点</li>`
				}
				hours.style.transform = `rotate(${360 / 24 * now.h}deg)`
				hours.innerHTML = html;
			}

			function renderPeriods() {
				let html = '';
				for (let i = 0; i < 12; i++) {
					html += `<li class="${i === now.p ? 'current' : ''}" style="transform:rotate(${-360 / 12 * i}deg)">${"子丑寅卯辰巳午未申酉戌亥"[i]}时</li>`
				}
				periods.style.transform = `rotate(${360 / 12 * now.p}deg)`
				periods.innerHTML = html;
			}

			function renderWeeks() {
				let html = '';
				for (let i = 0; i < 7; i++) {
					if (i == 0) {
						html += `<li class="${i === now.w ? 'current' : ''}" style="transform:rotate(${-360 / 7 * i}deg)">星期日</li>`
					} else {
						html += `<li class="${i === now.w ? 'current' : ''}" style="transform:rotate(${-360 / 7 * i}deg)">星期${toCN(i)}</li>`
					}
				}
				weeks.style.transform = `rotate(${360 / 7 * now.w}deg)`;
				weeks.innerHTML = html;
			}

			function renderDays() {
				let html = '';
				for (let i = 1; i <= howManyDates; i++) {
					html += `<li class="${i === now.a ? 'current' : ''}" style="transform:rotate(${-360 / howManyDates * i}deg)">${toCN(i)}日</li>`
				}
				days.style.transform = `rotate(${360 / howManyDates * now.a}deg)`;
				days.innerHTML = html;
			}

			function renderMonths() {
				let html = '';
				for (let i = 0; i < 12; i++) {
					html += `<li class="${i === now.m ? 'current' : ''}" style="transform:rotate(${-360 / 12 * i}deg)">${toCN(i + 1)}月</li>`
				}
				months.style.transform = `rotate(${360 / 12 * now.m}deg)`;
				months.innerHTML = html;
			}



		}
	</script>
</body>

</html>11