JavaScript随机生成颜色的方法

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/snowlove/p/6067683.html

文章标签：

#javascript #ViewUI

本文介绍三种使用JavaScript生成随机颜色的方法，并提供示例代码。通过不同的函数实现，可以在网页中为元素背景设置随机颜色。

这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友可以参考下

废话不多说了直接给大家贴js代码了，具体代码如下所述：

           <!DOCTYPE html>
          
           <html>
          
           <head lang=
           "en"
           >
          
           <meta charset=
           "UTF-8"
           >
          
           <title></title>
          
           </head>
          
           <body>
          
           <button id=
           "btn1"
           >调用第一种</button>
          
           <button id=
           "bnt2"
           >调用第二种</button>
          
           <button id=
           "btn3"
           >调用第三种</button>
          
           <script>
          
           var 
           btn1=document.getElementById(
           'btn1'
           );
          
           btn1.onclick=
           function
           (){
          
           document.body.style.background=bg1()
          
           };
          
           var 
           btn2=document.getElementById(
           'bnt2'
           );
          
           btn2.onclick=
           function
           (){
          
           document.body.style.background=bg2();
          
           };
          
           var 
           btn3=document.getElementById(
           'btn3'
           );
          
           btn3.onclick=
           function
           (){
          
           document.body.style.background=bg3();
          
           };
          
           function 
           bg1(){
          
           return 
           '#'
           +Math.floor(Math.random()*256).toString(10);
          
           }
          
           function 
           bg2(){
          
           return 
           '#'
           +Math.floor(Math.random()*0xffffff).toString(16);
          
           }
          
           function 
           bg3(){
          
           var 
           r=Math.floor(Math.random()*256);
          
           var 
           g=Math.floor(Math.random()*256);
          
           var 
           b=Math.floor(Math.random()*256);
          
           return 
           "rgb("
           +r+
           ','
           +g+
           ','
           +b+
           ")"
           ;
           //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
          
           }
          
           </script>
          
           </body>
          
           </html>