记录成长
分享快乐

JavaScript 实现网站标签随机颜色

“我走在乡间的小路上,看到自己的标签不太漂亮”,好吧,最近无聊修改了下自己网站侧边栏标签的样式,修改成了随机颜色的样子,具体效果看下面:

虽然这里说是实现网站标签随机颜色,但是其实你可以将代码略作调整适用于任何你想随机改变颜色的地方。具体 JavaScript 代码如下:

<script type="text/javascript">
    len = $(".widget_ui_tags .items a").length - 1;
    $(".widget_ui_tags .items a").each(function(i) {
        var let = new Array( '27ea80','3366FF','ff5473','df27ea', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');
        var random1 = Math.floor(Math.random() * 12) + 0;
        var num = Math.floor(Math.random() * 5 + 12);
        $(this).attr('style', 'background:#' + let[random1] + '; opacity: 0.6;'+'');
        if ($(this).next().length > 0) {
            last = $(this).next().position().left
        }
    });
</script>

代码原理很简单,通过 random 与 floor 获取一个随机数,然后从数组里面的颜色值中选择相应的颜色,这里我设置了 12 个随机颜色,当然你也可以自行添加更多颜色,修改一下参数即可。.widget_ui_tags .items a 是我目前所使用的主题标签侧边栏所对应的样式名,下面会给出具体样式,你可以直接将其改成自己的样式名。opacity 设置透明度,这里我设置的是 0.6 ,其他的就没什么了,还是祭出我目前所使用的样式吧。

/** 热门标签样式 **/
.widget_ui_tags .items {
    overflow: hidden;
    padding: 15px 0 12px 15px;
}
.widget_ui_tags .items a {
    color: #FFF;
    background-color: #f6f6f6;
    float: left;
    width: 30%;
    margin: 1%;
    padding: 3px;
    font-size: 12px;
    height: 28px;
    line-height: 22px;
    overflow: hidden;
    text-align:center;
    border-radius: 5px;
}
.widget_ui_tags .items a:hover {
    color: #fff;
    background-color: #45B6F7;
    border: 1px solid #FFF;
    opacity:1 !important;
}

基本上是根据我现有主题样式文件改的,!important 不能丢哦。

代码来源于网络,具体哪家的好长时间记不清了ヾ(◍°∇°◍)ノ゙。

赞(2) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » JavaScript 实现网站标签随机颜色
分享到: 更多 (0)

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #4

    同前面哪位一样预览有颜色,访问就没有颜色 DUX5

    QQ游客   | Windows 7 | Chrome 66.0.3359.139 | 6个月前 (06-29)回复
    • @ QQ游客 看下是不是JS代码没加载出来,颜色的话是JS代码控制的

      蝈蝈要安静     | Windows NT | Chrome 55.0.2883.87 | 6个月前 (06-29)回复
      • @ 蝈蝈要安静 是的 ,我自己新建了一个 .js文件放进去就不行 , 我放到 main.js 就没有问题 :confused:

        QQ游客   | Windows 7 | Chrome 66.0.3359.139 | 6个月前 (06-29)回复
  2. #3

    不知道为啥预览的时侯正常,但是访问首页就是没有颜色

    990903   | Windows NT | Chrome 55.0.2883.87 | 6个月前 (06-22)回复
    • @ 990903 看下是否是浏览器缓存或者CDN缓存的问题

      蝈蝈要安静     | Windows NT | Chrome 55.0.2883.87 | 6个月前 (06-23)回复
  3. #2

    dux主题在哪改呢

    隐藏在黑暗中的路人丶   | Windows 7 | Chrome 53.0.2785.104 | 7个月前 (05-22)回复
    • @ 隐藏在黑暗中的路人丶 CSS放在main.css文件中,JS去掉script标签丢到main.js中,也可以直接添加到后台自定义代码处,header.php或footer.php中也可以。看自己喜好吧。

      蝈蝈要安静     | Windows NT | Chrome 66.0.3359.181 | 7个月前 (05-23)回复
      • @ 蝈蝈要安静 上次在QQ跟您反馈的,例如贵站的 wp插件分类页,然后老的dux是直接写的 wp插件,贵站有:WP插件
        分享蝈蝈亲测的优秀WordPress插件并附上使用详解,这个横条,比老版的好看,希望有时间能更新下教程

        隐藏在黑暗中的路人丶   | Windows 7 | Chrome 53.0.2785.104 | 7个月前 (05-23)回复
  4. #1

    方法不错,我以前折腾都是直接随机那个数值,数值变了,颜色也就变了,这个JS方法也不错

    boke112导航   | Windows 7 | Chrome 66.0.3359.181 | 7个月前 (05-18)回复

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏