2021.11.26每天进步一点点：你还记得第1s打印1、第2s打印2...这个面试题吗？

本文链接：https://blog.csdn.net/tuzi007a/article/details/121567421

这里写目录标题

试题回顾

记得曾经看到过这样一道题目：

写一个函数，实现第1s打印1，第2s打印2 ... 第10s打印10

之前一直不理解这种题目是为了什么，

有点无聊。直到最近要写一个简单动画，用到了这种思想，

此时此刻，才恍然大悟。

–

题解

这个题写起来非常简单：

for(var i = 1; i < 11; i++) {
	(function(i) {
		setTimeout(function() {
			console.log(i);
		}, 1000 * i);
	})(i)
}

控制台打印结果：

在这里插入图片描述

应用场景

现在，我们要实现这样一个动画：

在这里插入图片描述

从左到右，依次有6个橙色小盒子。

最左侧有个蓝色盒子。点击move按钮时，蓝色小盒子一格一格的移动到最右侧。

如果只是这样的需求，css就可以写了。

而实际开发中，可能是每次点击都移动随机数量的格子数。而这个随机数量，是从后端接口中获取。

这时候，我们就可以用上述试题中的思想来处理。

思路

1，设置6个li，横向排列。默认颜色为橙色

2，设置一个类，比如.active，当li有这个类名时，就显示蓝色。没有这个类名，就显示默认色。

3，此时，点击按钮，在第1s，就给下标为1的li，加上类名。同时去除其他li的类名。

在第2s，就给下标为2的li，加上类名。同时去除其他li的类名。

…

在最后1s，就给最后一个li加上类名。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>点击按钮，渐次移动盒子位置</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.box {
			width: 300px;
			margin: 20px 0 0 20px;
		}

		.box_ul {
			width: 100%;
			height: 50px;
			list-style-type: none;
		}

		li {
			float: left;
			width: 50px;
			height: 50px;
			border-radius: 12px;
			background-color: lightsalmon;
			text-align: center;
			line-height: 50px;
			color: #fff;
			font-weight: 600;
			font-size: 20px;
		}

		li.active {
			background-color: mediumslateblue;
		}

		.btn {
			width: 100px;
			height: 40px;
			margin: auto;
			margin-top: 30px;
			background-image: radial-gradient(moccasin, mediumslateblue);
			font-size: 22px;
			text-align: center;
			line-height: 40px;
			color: #fff;
			font-weight: 600;
			border-radius: 12px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="box_ul">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<div class="btn">Move</div>
	</div>
	<script src="./jquery 3.6.0.js"></script>
	<script>
		var $len = $('.box_ul>li').length;
		$('.btn').on('click', function() {
			for (var i = 0; i < $len; i++) {
				(function (i) {
					setTimeout(function () {
						$('ul').find('li').eq(i).addClass('active').siblings().removeClass('active');
					}, 300 * i)
				})(i)
			}
		})
	</script>
</body>
</html>