JQ로 작성된 틱톡 나침반 클록

42985 단어 HTMLJavaScriptjQueryjqueryjavascripthtml
한 시간 안에 jQuery로 썼는데 효과가 괜찮아 보여요.
여기 효과도를 먼저 넣을게요.
전체 HTML 페이지
주해
  • 운동속도는transition을 찾습니다. 제가 설정한 것은 1s
    • 입니다.
  • 은은한 색상 찾기 activeColor noActiveColor
  • 원 간격 dPx 찾기
  • 상기 세 가지는 모두 사용자 정의할 수 있고 다른 것은 사용자 정의로 변경할 수 있다
    • 
<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>
head>

<body>
	<div class="timer">
		<div class="container">
			<div id="month">
			div>
		div>
		<div class="container">
			<div id="day">
			div>
		div>
		<div class="container">
			<div id="hour">
			div>
		div>
		<div class="container">
			<div id="minute">
			div>
		div>
		<div class="container">
			<div id="second">
			div>
		div>
	div>
body>
<style>
	body {
		padding: 0;
		margin: 0;
		background: #000;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	* {
		font-size: 12px;
	}

	.timer {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
	}

	#month,
	#day,
	#hour,
	#minute,
	#second {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	#month span,
	#day span,
	#hour span,
	#minute span,
	#second span {
		position: absolute;
		box-sizing: border-box;
		white-space: nowrap;
		color: #666;
		transition: all 1s; 
		display: flex;
		justify-content: center;
	}
style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<script>
	(function () {
		let monthLength = 12, monthHtml = '',
			dayLength = (new Date(new Date().getFullYear(), parseInt(new Date().getMonth() + 1), 0)).getDate(), dayHtml = '',
			hourLength = 24, hourHtml = '',
			minuteLength = 60, minuteHtml = '',
			secondLength = 60, secondHtml = '', dPx = 35, startDate = new Date(),
			activeColor = '#fff', noActiveColor = '#666'
		for (let i = 0; i < monthLength; i++) {
			monthHtml += `${i + 1} `
		}
		for (let i = 0; i < dayLength; i++) {
			dayHtml += `${i + 1} `
		}
		for (let i = 0; i < hourLength; i++) {
			hourHtml += `${i < 10 ? '0' + i : i} `
		}
		for (let i = 0; i < minuteLength; i++) {
			minuteHtml += `${i < 10 ? '0' + i : i} `
		}
		for (let i = 0; i < secondLength; i++) {
			secondHtml += `${i < 10 ? '0' + i : i} `
		}
		$('#month').html(monthHtml)
		$('#day').html(dayHtml)
		$('#hour').html(hourHtml)
		$('#minute').html(minuteHtml)
		$('#second').html(secondHtml)

		getTime()
		clearInterval(this.timer)
		this.timer = setInterval(() => {
			getTime()
		}, 1000);

		function getTime() {
			let nowDate = new Date()
			let nowMonth = nowDate.getMonth() + 1,
				nowDay = nowDate.getDate(),
				nowHour = nowDate.getHours(),
				nowMinute = nowDate.getMinutes(),
				nowSecond = nowDate.getSeconds(),
				dMinute = startDate.getMinutes() - nowMinute,
				dHour = startDate.getHours() - nowHour,
				dDay = startDate.getDate() - nowDay,
				dMonth = nowDate.getMonth() + 1 - nowMonth
			$('#month span').each((index, item) => {
				if (nowMonth == index + 1) item.style.color = activeColor
				else item.style.color = noActiveColor
				item.style.transform = `rotate(${(360 / (monthLength)) * (index + 1 - nowMonth + 12 * dMonth)}deg) translateX(${dPx}px)`
			})
			$('#day span').each((index, item) => {
				if (nowDay == index + 1) item.style.color = activeColor
				else item.style.color = noActiveColor
				item.style.transform = `rotate(${(360 / (dayLength)) * (index + 1 - nowDay + dayLength * dDay)}deg) translateX(${dPx * 2}px)`
			})
			$('#hour span').each((index, item) => {
				if (nowHour == index) item.style.color = activeColor
				else item.style.color = noActiveColor
				item.style.transform = `rotate(${(360 / (hourLength)) * (index - nowHour + 24 * dDay)}deg) translateX(${dPx * 3}px)`
			})
			$('#minute span').each((index, item) => {
				if (nowMinute == index) item.style.color = activeColor
				else item.style.color = noActiveColor
				item.style.transform = `rotate(${(360 / (minuteLength)) * (index - nowMinute + 60 * dHour)}deg) translateX(${dPx * 4}px)`
			})
			$('#second span').each((index, item) => {
				if (nowSecond == index) item.style.color = activeColor
				else item.style.color = noActiveColor
				item.style.transform = `rotate(${(360 / (secondLength)) * (index - nowSecond + 60 * dMinute)}deg) translateX(${dPx * 5}px)`
			})
		}
	})();
script>
html>

    엔딩:사실 써도 별로 없어요.
    단지 하나의 동그라미로 어떻게 배열해서rotate에 따라 360등분할 뿐이다.
    그리고translate에 따라 원을 배열한 반경에 따라 배열한 다음transition 애니메이션에 시간을 설정합니다.
    매 초마다 스핀 탭의 스타일을 바꾸는 타이머를 주십시오.
    transition이 있으면 애니메이션이 있습니다. 당신이 찍은 순서에 따라 시계 반대 방향으로 회전합니다.
    매번 00시가 안 될 때마다 한 바퀴 크게 돌기 위해 스타트데이트를 처음 설치해 시차에 따라 각도를 돌려서 다시 돌아가는 것을 피했다.
    이렇게 하자, 재미있어 보이네~~
    MSDTC 재설치
    jQuery의 숨겨진 디스플레이와 페이드 효과 (3)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage