敲代码练习之给文字添加随机颜色
很多天没有敲代码了，今天来复习一下本站链接页面随机颜色的实现方法，
嗯，大神请路过！
老样子，先说思路，其实产生随机颜色的方法是有很多的，因为本站有引入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>
Tags : 随机颜色
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！
Previous post
Magic Mouse 2
Next post
神坑之小米手机自带浏览器
已有 13 条评论