当前位置:首页 > 网页设计 >CSS >

实现随机多彩css样式–background、color、fontsize

发布时间:2016-09-19 17:48:30 作者:佚名 阅读:(711)

实现随机多彩css样式–background、color、fontsize
方法有三种:

第一,直接给每一个标签加上一个class样式,具体样式样式表css里面写,当然这种方法非常不可取,因为每个元素有不一样的class,程序端不能循环。

第二,比如标签云处,用了css3的写法,当然也是直接使用纯样式实现的,加载也快,不过低版本的浏览器就悲剧了,看不到什么五颜六色,css如下:
.d_tags a:nth-child(9n) {    background-color: #4A4A4A;

}

.d_tags a:nth-child(9n+1) {    background-color: #428BCA;

}

.d_tags a:nth-child(9n+2) {    background-color: #5CB85C;

}

显然 :nth-child() 这玩意儿是css3中的伪类选择器,这里n的值从0开始计算。

第三,jQuery实现随机分配tag标签css样式:
    <div id="tags">

        <a href='https://www.itbiancheng.com/'>导航菜单</a>

        <a href='https://www.itbiancheng.com/'>焦点幻灯片</a>

        <a href='https://www.itbiancheng.com/'>条幅广告代码</a>

        <a href='https://www.itbiancheng.com/'>经典下拉菜单</a>

        <a href='https://www.itbiancheng.com/'>jquery 特效</a>

        <a href='https://www.itbiancheng.com/'>滚动代码</a>

        <a href="https://www.itbiancheng.com/">查看源码</a>

<a href="https://www.itbiancheng.com/">网页源码</a>

<a href="https://www.itbiancheng.com/">多彩导航条</a>

<a href="https://www.itbiancheng.com/">css div</a>

<a href="https://www.itbiancheng.com/">JS表格隔行变色</a>

<a href="https://www.itbiancheng.com/">css+div</a>

<a href="https://www.itbiancheng.com/">chinacoder</a>

    </div>
#tags a{height:26px; line-height:26px;padding-right:6px;}#tags .tags0{}#tags .tags1{color:#C00; font-size:24px;}#tags .tags2{color:#030; font-size:16px;}#tags .tags3{color:#00F;}#tags .tags4{ font-size:16px;}#tags .tags5{color:#C00; font-size:20px;}#tags .tags6{color:#F06 font-size:20px;}#tags .tags7{color:#030; font-weight:bold; font-size:18px;}#tags .tags8{color:#F06; font-weight:bold;}#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}#tags .tags10{color:#090; font-weight:bold;font-size:18px;}#tags .tags11{color:#09F;}#tags .tags12{color:#F90;font-size:14px;}#tags a:hover{ color:#F00; text-decoration:underline;}
   < script type = "text/javascript" > $(document).ready(function() {
    var tags_a = $("#tags a");
    tags_a.each(function() {
        var x = 12;
        var y = 0;
        var rand = parseInt(Math.random() * (x - y + 1) + y); // Math.random() 令系统随机选取0-1之间的14位的随机数

        // parseInt() 函数可解析一个字符串,并返回一个整数

        $(this).addClass("tags" + rand);

    });

})

< /script>

不要忘记引入JQuery库文件,js注释写的很清楚, Math.random() 令系统随机选取0-1之间的随机数 ,
本例中 Math.random() * (x – y + 1) + y ,则是系统随机选取0-12之间的随机数,
而 parseInt( )函数是解析该字符串,并返回一个整数。

欢迎分享转载→ 实现随机多彩css样式–background、color、fontsize

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们