书犹药也,善读可以医愚

    

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

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

老样子,先说思路,其实产生随机颜色的方法是有很多的,因为本站有引入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. 回复 明月清风: 哈哈,这个适用的地方还真的不多:)

添加新评论

  时光笔记:逐渐成长

有天晚上下班,和豆豆吃过饭后一起接了小家伙回家,开车的时候我说了句:哎呀晚上吃太饱了。没想到小家伙拖着长长的音在边上说:我——也——是——,边说还一本正经地用手摸了摸自己的肚子,笑死我了。

updated on :

  关于博主

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

  近期评论

  •  Cat: 冒个泡
  •  Ronin: 咚门,算是我对这个圈子的启蒙吧(⁎⁍̴̛ᴗ⁍̴̛⁎) 刚上大学那会,看到他的站,直接就买了使用...
  •  Ronin: 小宇也认识咚哥?以前我用的咚哥的wp主题 能加下友链吗?本站已添加,日均100PV,经常更新的...
  •  一稿计划: 定期回访
  •  iherb: 坚持锻炼不容易 赞
  •  小酱博客-记录我的一生: 互相串门啊!超级喜欢你的模板! 网站名称:小酱博客~记录我的一生 网站简介:被嘲笑梦依旧前进着...
  •  哎呦: 这个时间轴啥时候能发布?
  •  bean sprout: 因为我也懒了,周末还要陪小孩,一点点想更新blog的想法也没有了
  •  为迪斯科: 您好,用了和你一样的风格模板,友情链接一下,谢谢。 博客名称:为迪斯科户外 博客描述:各种户外...
  •  叶戈: 来和大佬链接了, 名称 叶戈博客 地址 https://blog.xjqxz.top 好像不用...

生活其实很简单,过了今天就是明天。

低头哭过别忘了抬头继续走。

不要被任何人打乱自的脚步,因为没有谁会像你一样清楚和在乎自己梦想。

没有人可以打倒我,除非我自己先趴下!

你要记住你不是为别人而活,你是为自己而活。