书犹药也,善读可以医愚

    

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

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

老样子,先说思路,其实产生随机颜色的方法是有很多的,因为本站有引入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   神坑之小米手机自带浏览器

已有 12 条评论

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

添加新评论

  时光笔记:又一轮开始

这几天照旧很忙,其实过年也没怎么好好休息,因为这样那样的事情,包括意外之类的,打乱了所有的计划,等这些事情都得到解决了,才有时间来打理这里了。关于这个时间轴,周末看下有没有时间我会发布一下更新!虽然目前还不是完美的状态。

updated on :

  关于博主

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

很多东西宁缺毋滥,流星的光芒短暂而灼热闪耀。

让你变得更好的那个人,往往是你觉得很难与之相处的那个人。—— by 小宇

觉得自己做的到和不做的到,其实只在一念之间。

路在自己脚下,没有人可以决定我的方向。

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。