不断循环遍历JavaScript中的数组
[英]Continously loop over array in JavaScript
问题描述
I have an array of colors, that I need to «travel» through a set of elements, in order to create a visual effect. 
我有多种颜色，我需要“穿越”一组元素以创建视觉效果。 I struggle with getting the logic right. 我为正确的逻辑而苦苦挣扎。
I have X number of colors, say ["red", "blue", "yellow", "green"] . 我有X种颜色，例如["red", "blue", "yellow", "green"] 。 They need to be looped across Y <div> elements. 它们需要在Y <div>元素之间循环。 At every interval , color will shift from one <div> into a holding variable, or from the holding variable into the next <div> in line. 在每个interval ，颜色将从一行中的一个<div>转移到一个保持变量，或从一行中的保持变量转移到下一个<div> 。
4 个解决方案
解决方案1
1 2014-02-11 16:42:11
You can use pop and unshift to get elements from the rear of the array and inject them in the front. 您可以使用pop和unshift从数组的后面获取元素，然后将它们注入到前面。
var colours=["red", "blue", "yellow", "green"];
function mifunc(){
var element=colours.pop();
colours.unshift(element);
}
Now use setInterval to call myfunc and paint the array in order everytime you call it. 现在，使用setInterval调用myfunc并在每次调用时按顺序绘制数组。
Not a complete solution but may help you. 不是完整的解决方案，但可能会为您提供帮助。
解决方案2
0 2014-02-11 16:52:41
Here is a working sample. 这是一个工作示例。 Feel free to re-use / adjust: 随时重用/调整：
<html>
<head>
<style type="text/css">
.color { height: 100px; width: 100px; float: left; margin-right: 5px; }
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var code = {
hiddenIndex : -1,
showAll : function () {
$(".red").css("background-color","red");
$(".blue").css("background-color","blue");
$(".yellow").css("background-color","yellow");
$(".green").css("background-color","green");
},
hideOne : function (cssRef) {
code.showAll();
$(cssRef).css("background-color","white");
},
animate : function () {
switch(code.hiddenIndex) {
case -1:
code.showAll();
break;
case 0:
code.hideOne(".red");
break;
case 1:
code.hideOne(".blue");
break;
case 2:
code.hideOne(".yellow");
break;
case 3:
code.hideOne(".green");
break;
}
code.hiddenIndex++;
if (code.hiddenIndex > 3) code.hiddenIndex = -1;
}
};
(function () {
window.setInterval(function () { code.animate(); }, 200);
})();
</script>
</head>
<body>
<div class="colors">
<div class="red color"></div>
<div class="blue color"></div>
<div class="yellow color"></div>
<div class="green color"></div>
</div>
</body>
</html>
解决方案3
0 2014-02-11 17:02:43
BONUS: KnightRider-style oscillating action (otherwise same code): 奖励：KnightRider风格的摆动动作（否则相同的代码）：
<html>
<head>
<style type="text/css">
.color { height: 100px; width: 100px; float: left; margin-right: 5px; }
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var code = {
hiddenIndex : -1,
direction: 1,
showAll : function () {
$(".red").css("background-color","red");
$(".blue").css("background-color","blue");
$(".yellow").css("background-color","yellow");
$(".green").css("background-color","green");
},
hideOne : function (cssRef) {
code.showAll();
$(cssRef).css("background-color","white");
},
animate : function () {
switch(code.hiddenIndex) {
case -1:
code.showAll();
break;
case 0:
code.hideOne(".red");
break;
case 1:
code.hideOne(".blue");
break;
case 2:
code.hideOne(".yellow");
break;
case 3:
code.hideOne(".green");
break;
case 4:
code.showAll();
break;
}
code.hiddenIndex = code.hiddenIndex + code.direction;
if (code.hiddenIndex > 3 || code.hiddenIndex < 0) code.direction = code.direction * -1;
}
};
(function () {
window.setInterval(function () { code.animate(); }, 200);
})();
</script>
</head>
<body>
<div class="colors">
<div class="red color"></div>
<div class="blue color"></div>
<div class="yellow color"></div>
<div class="green color"></div>
</div>
</body>
</html>
解决方案4
0 2014-02-11 17:14:54
4 colors "travelling" over 3 divs 3种div上的4种颜色“旅行”
<html>
<head>
<style type="text/css">
.color { height: 100px; width: 100px; float: left; margin-right: 5px; }
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var code = {
firstPass : 1,
colorOptions : ["red", "blue", "yellow", "green"],
shift : function () { // borrowed from ojovirtual
var c = code.colorOptions.pop();
code.colorOptions.unshift(c);
},
animate : function () {
if (code.firstPass === 0) { // do not call on first pass through of code
$("#div1").removeClass(code.colorOptions[0]);
$("#div2").removeClass(code.colorOptions[1]);
$("#div3").removeClass(code.colorOptions[2]);
code.shift();
}
$("#div1").addClass(code.colorOptions[0]);
$("#div2").addClass(code.colorOptions[1]);
$("#div3").addClass(code.colorOptions[2]);
code.firstPass = 0; // indicate first pass is complete.
}
};
(function () {
window.setInterval(function () { code.animate(); }, 200);
})();
</script>
</head>
<body>
<div class="colors">
<div id="div1" class="color"></div>
<div id="div2" class="color"></div>
<div id="div3" class="color"></div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.