不斷循環遍歷JavaScript中的數組
[英]Continously loop over array in JavaScript
問題描述
我有多種顏色，我需要“穿越”一組元素以創建視覺效果。 我為正確的邏輯而苦苦掙扎。
我有X種顏色，例如["red", "blue", "yellow", "green"] 。 它們需要在Y <div>元素之間循環。 在每個interval ，顏色將從一行中的一個<div>轉移到一個保持變量，或從一行中的保持變量轉移到下一個<div> 。
4 個解決方案
解決方案1
1 2014-02-11 16:42:11
您可以使用pop和unshift從數組的后面獲取元素，然后將它們注入到前面。
var colours=["red", "blue", "yellow", "green"];
function mifunc(){
var element=colours.pop();
colours.unshift(element);
}
現在，使用setInterval調用myfunc並在每次調用時按順序繪制數組。
不是完整的解決方案，但可能會為您提供幫助。
解決方案2
0 2014-02-11 16:52:41
這是一個工作示例。 隨時重用/調整：
<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
獎勵：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
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>
如何在 JavaScript 中連續 map 陣列？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.