随机颜色案例

最新推荐文章于 2025-12-17 09:17:01 发布

原创最新推荐文章于 2025-12-17 09:17:01 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #javascript

JS 专栏收录该内容

91 篇文章

订阅专栏

本文探讨了如何使用JavaScript生成随机颜色，包括RGB数值和十六进制表示，并展示了如何为HTML元素设置背景色。通过函数getRandom()演示了如何创建不同亮度的随机RGB颜色，以及将其转换为十六进制形式的应用。

随机颜色
            R　255
            G　102
            B　102

            #FF6666 
          
            RGB
              => Red  :  0 ~ 255   =>   120
              => Green:  0 ~ 255   =>   230
              => Blue :  0 ~ 255   =>   23

            rgb(120,230,23)

        
             #FF6666  十六进制颜色表示法




     -->
    <style>
        div {
            width: 500px;
            height: 500px;
            /* background-color: #8a2be2;   */
        }



 function getRandom(x, y) {
            var m = Math.min(x, y)
            var n = Math.max(x, y)
            return Math.floor(Math.random() * (n - m) + m)
        }

        // function setBakctroundColor() {
        //     var r = getRandom(0, 256)
        //     var g = getRandom(0, 256)
        //     var b = getRandom(0, 256)
            
        //     var bg = `rgb(${r}, ${g}, ${b})`
        //     console.log(bg);
        //     //设置背景颜色给div
        //     document.querySelector('div').style.backgroundColor = bg
        // }
        // setBakctroundColor()
        /*
          十六进制
        */
    //    function getbg(){
    //        var r = getRandom(0,256)
    //        var g = getRandom(0,256)
    //        var b = getRandom(0,256)
    //        var r16 = r.toString(16)
    //        var g16 = g.toString(16)
    //        var b16 = b.toString(16)
    //        var gc16 = `#${r16}${g16}${b16}`
    //        console.log(gc16)
    //        document.querySelector('div').style.backgroundColor = gc16
    //    }
    //    getbg()