随机指定网页元素背景色示例

• 2020 年 4 月 21 日
• 笔记

js功能下午刚开通。给自己的博客做了个“微语”的小功能，大概作用就是在首页显示一个含有鸡汤文的电影台词的div。每次刷新网页或者点按钮刷新会更新内容。

做完后觉得颜色比较单调（我自己的习惯性问题）。琢磨了一下想出了一个动态改变颜色的办法。

因为博客园默认包含了jquery。所以先用js数组定义一个喜欢的颜色列表。随机取一个出来，然后直接用jquery去改变元素的背景。

放到侧边栏定义里面，主要代码如下：

<script>
$(function(){

setColor();

});

function setColor(){
var colorArr=new Array("#00BCD4","#8bc34a","#f44336","#f44336","#9c27b0","#3f51b5")
var theColor = colorArr[Math.floor((Math.random()*colorArr.length))];
$("#whispers").css("background-color",theColor );
}
</script>