html设置随机背景色,JavaScript-网页设置随机背景颜色-js随机产生一个十六进制的颜色值 - 子成君-分享出去，快乐加倍！-旧版已停更...

本站已不再更新,最新资源请前往zcjun.com获取!

我每添加一个新的api点击按钮就要在style里写一个不同的颜色。

我觉得很麻烦，就基于math.random()方法写了一个产生随机十六进制数的js代码，

效果还是很NICE的，看图：

然后百度了一下网上大神的写法，一共两份代码，一个控制类的一个控制id的，嵌在html里了

用得到的复制过去自己看吧。

控制id案例：

随机十六进制值

div {

width: 300px;

height: 200px;

background-color: pink;

}

function getColor() {

var str = "#";

//一个十六进制的值的数组

var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];

for (var i = 0; i < 6; i++) {

//产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起

var num = parseInt(Math.random() * 16);

str += arr[num];

}

return str;

}

//页面记载的事件

window.onload = function () {

//在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色

document.getElementById("dv").style.backgroundColor = getColor();

};

//console.log(getColor());

控制class案例：

随机背景颜色-子成君

div {

width: 300px;

height: 200px;

background-color: pink;

}

function bg1(){

return '#'+Math.floor(Math.random()*0xffffff).toString(16);

}

window.onload = function(){

var bg = document.getElementsByClassName("dv");

for(var i = 0; i < bg.length; i++){

bg[i].style.backgroundColor = bg1();

}

}

版权声明：若无特殊注明，本文皆为《 子成君 》原创，转载请保留文章出处。 本文链接：JavaScript-网页设置随机背景颜色-js随机产生一个十六进制的颜色值 https://old.zcjun.com/learn/228.html 百度收录：本文已被百度收录点击查看详情！

本文到此结束