JavaScript - 获取随机颜色实例

目录

未命名_meitu_2.jpg

因为之前一直想做个书签页,但又苦于不知道做成什么样式,所以就想了做成随机颜色代码块,所以就写了这个,每刷新一次,每个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);
    }

标签: css html javascript

声明:本博客如无特殊说明皆为原创,转载请注明来源:JavaScript - 获取随机颜色实例谢谢!

相关文章

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png