原生jquery实现倒计时功能【animate】动画特效包含天，时分秒

Aloye_喜樂

已于 2023-05-04 10:16:48 修改

阅读量753

点赞数

文章标签： jquery javascript 前端

于 2023-05-03 10:50:52 首次发布

本文链接：https://blog.csdn.net/yxgd_1442962728/article/details/130463403

版权

请添加图片描述

<!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>
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

	</head>
	<body>
		<div id="countDown">
			<div class="count-down-item">
				<div class="countdown-days"
					style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
				</div>
				<span class="count-down-item-text"
					style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">DAYS</span>
			</div>

			<div class="count-down-item">
				<div class="count-hours"
					style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
				</div>
				<span class="count-down-item-text"
					style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">HOURS</span>
			</div>

			<div class="count-down-item">
				<div class="count-minutes"
					style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
				</div>
				<span class="count-down-item-text"
					style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">MINUTES</span>
			</div>

			<div class="count-down-item">
				<div class="count-seconds"
					style="color:#FFFFFF;font-size:22px;font-weight:600;text-align:center;">
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
					<span class="countdown-position-wapper" style="width: 18px;height: 30px;">
						<span class="countdown-digit static" style="top: 0px; opacity: 1;">0</span>
					</span>
				</div>
				<span class="count-down-item-text"
					style="color:#FFFFFF;font-size:14px;font-weight:normal;text-align:center;">SECONDS</span>
			</div>
		</div>
		<script>	
			var positions = $('#countDown').find('.countdown-position-wapper');
			/**
			 * 获取倒计时并更新
			 */
			function updateTime() {
				let total = Date.parse('2023-05-10 17:20:00') - Date.parse(new Date());

				days = Math.floor(total / (1000 * 60 * 60 * 24))
				
				hours = Math.floor((total / (1000 * 60 * 60)) % 24)

				minutes = Math.floor((total / 1000 / 60) % 60)

				seconds = Math.floor((total / 1000) % 60)

				total--;
				if (total < 0) {
					seconds = 0
					minutes = 0
					hours = 0
					days = 0
					clearInterval(timer);
				}
				
				updateDigitPosition(0, 1, days);
				updateDigitPosition(2, 3, hours);
				updateDigitPosition(4, 5, minutes);
				updateDigitPosition(6, 7, seconds);
			};
			// 倒计时定时器
			let timer = setInterval(updateTime, 1000);

			/**
			 * 一次性更新两位数位置
			 * @param {Object} firstIndex
			 * @param {Object} secondIndex
			 * @param {Object} value
			 */
			function updateDigitPosition(firstIndex, secondIndex, value) {
				changeDigit(positions.eq(firstIndex), Math.floor(value / 10) % 10);
				changeDigit(positions.eq(secondIndex), value % 10);
			}

			function changeDigit(position, number) {

				var digit = position.find('.countdown-digit')

				if (digit.is(':animated')) {
					return false;
				}

				if (position.data('digit') == number) {
					// 已经显示了这个数字
					return false;
				}

				position.data('digit', number);

				var replacement = $('<span>', {
					'class': 'countdown-digit',
					css: {
						top: '-30px',
						opacity: 0
					},
					html: number
				});

			// 在动画制作时添加.static类，其中top值为countdownConfig中设置的positionWapperHeight
			digit
				.before(replacement)
				.removeClass('static')
				.animate({
					top: '30px',
					opacity: 0
				}, 'fast', function() {
					digit.remove();
				})

			replacement
				.delay(100)
				.animate({
					top: 0,
					opacity: 1
				}, 'fast', function() {
					replacement.addClass('static');
				});
			}
		</script>
	</body>
</html>

<style>
	html,
	body {
		font-family: 'CenturyGothic' !important;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		word-break: break-word;
		color: #232222;
	}

	div {
		box-sizing: border-box;
	}

	#countDown {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-bottom: 32px;
	}

	.count-down-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.count-down-item-text {
		padding-top: 8px;
	}

	.countdown-position-wapper {
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.countdown-digit {
		position: absolute;
		display: block;
		letter-spacing: -1px;
	}
	
</style>

Aloye_喜樂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生jquery实现倒计时功能【animate】动画特效包含天，时分秒

<!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>倒计时</t
复制链接

扫一扫