卡住骑自行车通过多种颜色。

我一直在试图找到替代div的背景颜色。我有11种颜色，需要循环显示，连续两次显示相同的颜色。我已经看过css中的第十一个孩子，但没有结果，几行中的所有颜色都结束了。现在我试图通过JavaScript中的循环来实现它。有人知道更简单的方法吗？我有这个，它经历了很多次迭代。我只是停留在这一点上。卡住骑自行车通过多种颜色。

function ColorChange(){ 
    var divcount = $('.time').length; 
    var timediv = document.getElementsByClassName('time'); 
    var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333"); 
    for(var i = 0; i<timediv.length; i++){ 
     for(var l = 0; l<mycolors.length;l++){ 
      timediv[i].style.background = mycolors[l]; 
     } 
    } 
}

来源

2013-09-23 DevMaceika

你交流的一段时间间隔，或者干脆就页面刷新？ – Julio

作为旁注;我宁愿将颜色设置为CSS类，然后在html标签上的类之间交替。我认为这种分离使得东西更清晰 –

第一个问题我在刷新页面我现在使用％运算符工作。至于css类，我没有想到这一点，谢谢。我可以切换到这种格式。 – DevMaceika

您似乎将背景颜色有效地设置为列表中的最后一种颜色。通过定义的颜色

for(var i=0; i<timediv.length; i++) { 
    timediv[i].style.backgroundColor = mycolors[i % mycolors.length]; 
}

这将循环，并感谢%操作它将循环周围到列表的开始，如果去过去的结束：为什么不试试这个。

来源

2013-09-23 18:13:57

非常感谢您在回答之前我刚刚通过％运算符进行了突破。 – DevMaceika

你可以创建一个工具类来帮助骑自行车。

下面是这样一个类的例子。你可以通过调用next()来传递一个数组并循环遍历它。

http://jsfiddle.net/3Gw9C/

function Cycler (collection) { 
    this.collection = collection; 
    this.index = 0; 

    this.next = function() { 
     if (this.index >= this.collection.length) { 
      this.index = 0; 
     } 
     return this.collection[this.index++]; 
    } 
} 

var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333"); 

var cycler = new Cycler(mycolors); 

for (var i = 0; i < timediv.length; i++) { 
    timediv[i].style.backgroundColor = cycler.next(); 
}

来源

2013-09-23 18:16:13 Bart

你似乎是使用jQuery和JavaScript的组合。所以我去了jQuery路线

http://jsfiddle.net/bhlaird/NyKFf/

function ColorChange(){ 

    var count = 0; 
    var mycolors = new Array("#0066cc","#996699","#990033","#ff9933", "#99cc33","#33cc66","#009999","#6699cc", "#999999","#534741", "#663333"); 
    $('.time').each(function() { 
     $(this).css('background-color', mycolors[count++]); 
     if (count > mycolors.length) count = 0; 
    }); 

}

来源

2013-09-23 18:22:08

jQuery **是** javascript。 – Bart

@Bart - 如果有人没有使用jQuery库，添加jQuery只是为了做一个简单的函数将是矫枉过正。这也可以很容易地用直接的JavaScript来完成。 –

另一种选择是一个纯CSS路线： http://jsfiddle.net/bhlaird/9Hbmr/

#colors .time:nth-child(11n) { 
    background-color:#0066cc; 
} 
#colors .time:nth-child(11n+1) { 
    background-color:#996699; 
} 
#colors .time:nth-child(11n+2) { 
    background-color:#990033; 
} 
#colors .time:nth-child(11n+3) { 
    background-color:#ff9933; 
}

等

来源

2013-09-23 18:28:08

卡住骑自行车通过多种颜色。

回答

相关问题