微信：unfunction

页面刷新一次给div随机取色值

在项目中，有时候固定色块的颜色感觉太单一了，让读者没有耳目一新的感觉，那么我们可以通过让页面每刷新一次来改变起颜色，重新唤起用户...

下面是我在项目中的一个实例

 

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.onload=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     })

 

posted @ 2015-10-09 15:52  混在成都  阅读(859)  评论(0)  编辑  收藏  举报