在项目中,有时候固定色块的颜色感觉太单一了,让读者没有耳目一新的感觉,那么我们可以通过让页面每刷新一次来改变起颜色,重新唤起用户...
下面是我在项目中的一个实例
HTML:
1 <div></div> 2 <div></div> 3 <div></div> 4 <div></div> 5 <div></div> 6 <div></div> 7 <div></div> 8 <div></div>
CSS:
1 div{width: 100px;height: 100px; float: left; margin-left:1px;}
我们可以通过原生的JavaScript来实现当然也是可以使用jQuery,下面分别是两种方法:
JavaScript:
1 window.οnlοad=function(){ 2 3 4 var colorList = ['#a9ddcc','#ff6867','#809b9c','#00cccb','#bcbdc1','#f6c500','#767386','#4cda64']; 5 6 var div = document.getElementsByTagName('div'); 7 8 9 for(var i=0;i<div.length;i++){ 10 11 var bgColor = getColorByRandom(colorList); 12 div[i].style.background=bgColor; 13 } 14 15 16 17 function getColorByRandom(colorList){ 18 var colorIndex = Math.floor(Math.random()*colorList.length); 19 var color = colorList[colorIndex]; 20 colorList.splice(colorIndex,1); 21 return color; 22 } 23 24 }
jQuery:
1 $(function(){ 2 var colorList = ['#a9ddcc','#ff6867','#809b9c','#00cccb','#bcbdc1','#f6c500','#767386','#4cda64']; 3 var div = $('div'); 4 5 $.each(div, function() { 6 var bgColor = getColorByRandom(colorList); 7 $(this).css('background-color', bgColor); 8 }) 9 10 function getColorByRandom(colorList){ 11 var colorIndex = Math.floor(Math.random()*colorList.length); 12 var color = colorList[colorIndex]; 13 colorList.splice(colorIndex,1); 14 return color; 15 } 16 17 })