【如何使用JS实现随机变色的效果？ _数据类型 _函数 _操作DOM 】

如何使用JS实现随机变色的效果？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

数据类型函数操作DOM

详细描述

截图

代码

//获取随机色的函数-rgb(方法一：利用document.querySelector方法接受一个CSS选择器作为参数)

function getRandomColor() {
    var rgb = 'rgb(' + Math.floor(Math.random() * 255) + ','
        + Math.floor(Math.random() * 255) + ','
        + Math.floor(Math.random() * 255) + ')';
    return rgb;
}
//    获取按钮点击事件
var btn_one = document.querySelector("#btn-one");//获取开始按钮节点
var box = document.querySelectorAll(".bg-one");//获取九宫格小盒子节点
btn_one.onclick = function () {
    for (var i = 0; i < box.length; i++) {
        box[i].style.backgroundColor = getRandomColor();
    }
}


//获取对象（(方法二：利用document.getElementById和getElementsByClassName方法来设置参数）
var bigbox = document.getElementById("box"); //获取大盒子
var smallbox = document.getElementsByClassName("bg-one"); //获取小盒子
var startbtn = document.getElementById("btn-one"); //获取开始按钮
var stopbtn = document.getElementById("btn-two"); //获取结束按钮

//获取随机色的函数-rgb
function getRandomColor() {
    var rgb = 'rgb(' + Math.floor(Math.random() * 255) + ','
        + Math.floor(Math.random() * 255) + ','
        + Math.floor(Math.random() * 255) + ')';
    return rgb;
}

//获取点击按钮事件
startbtn.onclick=function startClick () {
    for (var i = 0; i < smallbox.length; i++) {
        smallbox[i].style.backgroundColor = getRandomColor();
    }
}

编辑于2024-11-23

时间排序

热门排序

[深圳|结业弟子]JS-张峻
1

还有随机获得一种十六进制颜色方法：
function randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
if(r < 16){
r = "0"+r.toString(16);
}else{
r = r.toString(16);
}
if(g < 16){
g = "0"+g.toString(16);
}else{
g = g.toString(16);
}
if(b < 16){
b = "0"+b.toString(16);
}else{
b = b.toString(16);
}
return "#"+r+g+b;
}

查看全部>

编辑于2018-06-08

去第页