randomColor （2）--rgb（r，g，b）类型

最新推荐文章于 2025-06-12 11:26:46 发布

原创最新推荐文章于 2025-06-12 11:26:46 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #随机颜色

js 同时被 2 个专栏收录

113 篇文章

订阅专栏

随机颜色

2 篇文章

订阅专栏

本文介绍了一个简单的网页示例，点击按钮后，div元素将显示随机背景颜色。代码使用了HTML、CSS和JavaScript，并提供了两种生成随机颜色的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接着昨天的随机颜色，今天在页面放一个div和一个button，欲实现：click on button时，div换随机背景颜色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>randomColor</title>
    <style>
        div{
            margin:200px auto 0 auto;
            border:3px solid #ddd;
            width:300px;
            height:300px;
            position: relative;
        }
    </style>
</head>
<body>
<div></div>
<button>点我</button>
<script>
function $(selector){
    return document.querySelector(selector);
}
function randomColor(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "r"+"g"+"b("+r+","+g+","+b+")";

}
$("button").onclick=function(){
    $("div").style.background=randomColor();
}
</script>
</body>
</html>

在randomColor()，也可以传参数，生成一定颜色；

function randomColor(min,max){
    var r=Math.floor(Math.random()*(max-min)+min);
    var g=Math.floor(Math.random()*(max-min)+min);
    var b=Math.floor(Math.random()*(max-min)+min);
    return "r"+"g"+"b("+r+","+g+","+b+")";
}

比如，randomColor(200,256)会生成浅色；
randomColor(0,100)会生成深色；