书犹药也,善读可以医愚

    

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

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

老样子,先说思路,其实产生随机颜色的方法是有很多的,因为本站有引入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场半程马拉松。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于运动!

  近期评论

  •  御宅男: 码农路过,留下一个爪印!!!!
  •  林叶展弟弟: 我自己魔改了一些,都是在文件里直接改的,每次更新还是不辞辛苦改一改。
  •  御宅男: 瓜农路过 留下一个爪印
  •  白: 谢谢你!
  •  Zllf: 博主你好,能不能加个导航栏下拉菜单的功能?按分类-子分类做导航菜单。
  •  test1: 对自己来说, 记忆就是人生, 如果所有都忘记了, 那么, 对自己来说,就等于没来过.
  •  laoyao: 谢谢!你这主题好。对于我这个小白只能慢慢摸索
  •  laoyao: 大佬。不要文章页和独立页面的头部大图,怎么删除
  •  灰常记忆: 图片和网站共存亡
  •  灰常记忆: 记得有句话叫做记忆是痛苦的根源

  分类目录

快乐地过是一天,不快乐地过也是一天,我为什么不快快乐乐地过每一天呢?

岂能尽随人愿,但求无愧我心。

在你内心深处,还有无穷的潜力,有一天当你回首看时,你就会知道这绝对是真的。

活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。

挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去。