这里写目录标题
-
-
-
- 试题回顾
- 题解
- 应用场景
- 思路
- 实现代码
-
-
试题回顾
记得曾经看到过这样一道题目：
写一个函数，实现第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>