使用JQ编写的抖音罗盘时钟

最新推荐文章于 2021-09-03 13:22:22 发布

Xaivor

最新推荐文章于 2021-09-03 13:22:22 发布

阅读量596

点赞数 1

本文链接：https://blog.csdn.net/weixin_43759645/article/details/106807454

版权

JavaScript 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

一个小时内用jQuery写出来的，效果看上去还不错。

这里先放个效果图

在这里插入图片描述

整个HTML页面

注

运动速度找transition,我设置的是1s
显隐颜色找activeColor noActiveColor
圆间距找dPx
以上三点都可以自定义，其他的要自定义自己改

<!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>
</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 += `<span>${i + 1}月</span>`
		}
		for (let i = 0; i < dayLength; i++) {
			dayHtml += `<span>${i + 1}日</span>`
		}
		for (let i = 0; i < hourLength; i++) {
			hourHtml += `<span>${i < 10 ? '0' + i : i}点</span>`
		}
		for (let i = 0; i < minuteLength; i++) {
			minuteHtml += `<span>${i < 10 ? '0' + i : i}分</span>`
		}
		for (let i = 0; i < secondLength; i++) {
			secondHtml += `<span>${i < 10 ? '0' + i : i}秒</span>`
		}
		$('#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动画设置时长。

给个定时器，每秒获取时间改变每个span标签的样式。

有了transition就有动画了，根据你拍的顺序它就会逆/顺时针旋转了。

为了每次不到00时，转一大圈，我还初始设置了startDate，根据时差旋转角度，这样就避免了重新转回。

就这样吧，看起来还挺有趣的~~

Xaivor

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用JQ编写的抖音罗盘时钟

一个小时内用jQuery写出来的，效果看上去还不错。这里先放个效果图整个HTML页面注运动速度找transition,我设置的是1s显隐颜色找activeColor noActiveColor圆间距找dPx以上三点都可以自定义，其他的要自定义自己改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content
复制链接

扫一扫

专栏目录