因为之前一直想做个书签页，但又苦于不知道做成什么样式，所以就想了做成随机颜色代码块，所以就写了这个，每刷新一次，每个li颜色随机产生。js干的事就是遍历数组、获取随机值，最后将每个随机值组合在一起，组成一个6位颜色代码并应用到每个LI列表项目，很简单。

然后写好后去看了一下大神的方法，自愧不如，大家可以看一下：

http://www.cnblogs.com/rubylouvre/archive/2009/09/24/1572977.html

我的书签页：

/for-love.html

CSS

.content a li{
list-style:none;  
height:40px;
width:70px;
text-align:center;
line-height:40px;
display:inline-block;
margin-bottom: 5px;
}
#mark a:hover {
text-decoration: none;
color: #FFF;
}
#mark a {
color: #FFF;
text-decoration: none;
}

HTML

<span id="mark">
<a href="http://www.howzhi.com/" target="_blank"><li>好知</li></a>
<a href="http://shixian.com/" target="_blank"><li>实现</li></a>
<a href="http://www.jiawin.com/" target="_blank"><li>觉唯</li></a>
<a href="http://code.ciaoca.com/" target="_blank"><li>开发仓库</li></a>
<a href="http://huaban.com/" target="_blank"><li>花瓣</li></a>
<a href="http://ninghao.net/" target="_blank"><li>宁皓</li></a>
<a href="http://www.daizhe.cn/" target="_blank"><li>待着</li></a>
<a href="http://www.ui.cn/" target="_blank"><li>UI中国</li></a>
<a href="http://www.zuidaima.com/" target="_blank"><li>最代码</li></a>
<a href="http://ueditor.baidu.com/website/" target="_blank"><li>UEditor</li></a>
<a href="http://naotu.baidu.com/" target="_blank"><li>脑图</li></a>
<a href="http://www.divcss5.com/jiqiao/j4.shtml" target="_blank"><li>命名规范</li></a>
<a href="http://msdn.itellyou.cn/" target="_blank"><li>MSDN</li></a>
<a href="http://youqu.de/" target="_blank"><li>有趣的</li></a>
<a href="http://segmentfault.com/" target="_blank"><li>Segment</li></a>
<a href="http://kuai.qietu.com/" target="_blank"><li>快切</li></a>
<a href="http://www.iconfont.cn/" target="_blank"><li>矢量图标</li></a>
<a href="http://1nami.com/" target="_blank"><li>一纳米</li></a>
<a href="http://www.5kun.com/" target="_blank"><li>5KUN</li></a>
<a href="http://720yun.com/" target="_blank"><li>全景摄影</li></a>
<a href="http://zzbaohe.com/" target="_blank"><li>站长宝盒</li></a>
<a href="http://prismjs.com/download.html" target="_blank"><li>prismjs</li></a>
<a href="https://www.shiyanlou.com/" target="_blank"><li>实验楼</li></a>
<a href="http://www.imooc.com/" target="_blank"><li>慕课网</li></a>
</span>

JavaScript

var l=document.getElementById("mark").getElementsByTagName("li"); 
for(var i=0;i<l.length;i++){ 
    var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
    function generateMixed(n) {
         var res = "";
         for(var i = 0; i < n ; i ++) {
             var id = Math.ceil(Math.random()*16)-1;
             res += chars[id];//将颜色代码组合
         }
         return res;
    }
    var num = generateMixed(6);
    l[i].style.background="#"+num;
//alert(num);
}