书犹药也,善读可以医愚

    

敲代码练习之给文字添加随机颜色

很多天没有敲代码了,今天来复习一下本站链接页面随机颜色的实现方法,
嗯,大神请路过!

老样子,先说思路,其实产生随机颜色的方法是有很多的,因为本站有引入jQuery,所以使用的是jQuery的方法,
用到了以下几个知识点:

each()方法:遍历
Math.random()方法:产生随机数
parseInt()方法:获取整数

运作方式:将每一个需要给予随机颜色的元素设置一个class名称,然后遍历所有拥有该class的元素,每进行一次循环产生一个随机整数,为这个整数添加前缀作为另一个class类名赋值给元素,在CSS样式中为这些类名设置对应的颜色属性。

描述可能会有点绕,还是直接看代码的,另外说一下是有其他更好的方式来产生随机颜色的,甚至不需要在CSS中宇明,也不需要jQuery就可以实现,但有些特别的情况下,需要用到此方法,所以这一篇只是记录其中一个方法而已。

完整的代码如下,因为是练习,又手动敲了一遍:

<!DOCTYPE html>
<html>
<head>
    <title>random color</title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    .setcolor0 { color: rgba(244,124,37,.6); }
    .setcolor1 { color: rgba(37,185,244,.6); }
    .setcolor2 { color: rgba(244,37,37,.6); }
    .setcolor3 { color: rgba(233,37,244,.6); }
    .setcolor4 { color: rgba(137,37,244,.6); }
    .setcolor5 { color: rgba(37,80,244,.6); }
    .setcolor6 { color: rgba(31,175,14,.6); }
    .setcolor7 { color: rgba(158,13,126,.6); }
    .setcolor8 { color: rgba(244,191,37,.6); }
    .setcolor9 { color: rgba(244,144,37,.6); }
    .setcolor10 { color: rgba(6,133,183,.6); }
</style>
<body>
    <p class="setfontcolor">test word 1</p>
    <p class="setfontcolor">test word 2</p>
    <p class="setfontcolor">test word 3</p>
    <p class="setfontcolor">test word 4</p>
    <p class="setfontcolor">test word 5</p>
    <p class="setfontcolor">test word 6</p>
    <p class="setfontcolor">test word 7</p>
    <p class="setfontcolor">test word 8</p>
</body>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript">
    //文档加载完后执行方法
    $(document).ready(function() {
        var randomColor = $(".setfontcolor"); //选择器获取元素
        randomColor.each(function(){ //遍历每一个拥有setfontcolor类名的元素
            var x = 10;
            var y = 0;
            var randColor = parseInt(Math.random() * (x - y + 1) +y); //产生0-10之间的随机整数
            $(this).addClass("setcolor" + randColor); //给元素添加一个class,达到随机的效果
        });
    });
</script>
</html>

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post Magic Mouse 2
Next post   神坑之小米手机自带浏览器

已有 13 条评论

  1. jquery好久没练都生疏了,不过可以尝试用一个数组进行遍历,这样代码会更加简洁。
    1. 回复 程志辉: 你出来冒泡了阿。我后来发现了一个十分方便的方法,但是我懒得改了,嘿嘿。
      1. 回复 小宇: 嘻嘻嘻,今天第一天上班,寒假在培训班有很多时间,可以好好利用一下了,还治好了早不起的懒病
        1. 回复 程志辉: 很不错阿,优秀!~我最近事情一多,锻炼的事又耽误了,这可如何是好?
  2. 你网站手机端,左上角的菜单弹不出来
    1. 回复 爱css: 阿噢,我刚用手机上的腾讯浏览器、火狐、还有GOOGLE浏览器试了下都是可以的吖,你用的是哪个浏览器?
      1. 回复 小宇: 我的小米自带的浏览器,发现没反应的
        1. 回复 爱CSS: 原因已找到:小米浏览器误判jsdelivr的引入为广告,SB似的屏蔽了从jsdelivr引入的公共资源,导致一部份CSS跟JS引入失败。所以出现轮播图及菜单失效等问题,我更改了公共资源引入源,该问题已解决。
    1. 回复 清歌: 这个是很基础的呀,没有那么难懂吧 - -!
  3. 用来写文章有点飘了,琢磨一下,用在哪里合适。
    1. 回复 明月清风: 哈哈,这个适用的地方还真的不多:)

添加新评论

  Timeline:一生

那一条老街之中
居住着许多老人
每隔一段时间
就有一个生命从老街中逝去
住在这条街道的人渐渐习惯
人到了岁数
是不得不离开的
渐渐消失的生命
无论各自经历了怎样的一生
最终都是安安静静地离去了
留不得一点东西

updated on :

  关于博主

84年,天秤座与处女座交接,有一点点强迫症,性格诡异,情绪复杂多变。爱好健身、跑步,一年必跑一场全程马拉松,N场半程马拉松。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于运动!

  近期评论

  •  Feng: 这网站是不打算开了吗?好久了呢
  •  程志辉: 宇哥的网站啥时候恢复哇
  •  阿怡: 二级分类相册不可以继承。不知道怎么改。
  •  阿怡: 二级分类相册不可以继承。不知道怎么改。
  •  kaio: 这网站真棒。做个参考
  •  姑姑: 这个名字秒啊
  •  Liu先生的故事小屋: 友链更名 原名 -小酱博客 现名-Liu先生的故事小屋 麻烦博主换一下友链名
  •  御宅男: 码农路过,留下一个爪印!!!!
  •  林叶展弟弟: 我自己魔改了一些,都是在文件里直接改的,每次更新还是不辞辛苦改一改。
  •  御宅男: 瓜农路过 留下一个爪印

  分类目录

有种脾气叫,不放弃。

梦想是注定孤独的旅行,路上少不了质疑和嘲笑,但那又怎样,哪怕遍体鳞伤也要活的漂亮。

不管现在有多么艰辛,我们也要做个生活的舞者。

命运从来不会同情弱者。

不怕万人阻挡在前方,只怕自己先行投降。