js产生随机颜色

最新推荐文章于 2023-03-25 10:16:18 发布

空-城旧-梦

最新推荐文章于 2023-03-25 10:16:18 发布

阅读量1k

点赞数

分类专栏：前端

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、首先是一个HTML布局，p标签是是用来放当前颜色的，div的背景颜色就是这个颜色

[html]view plaincopyprint? 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
         <title>randomColor</title>  
     </head>  
     <body>  
         <p id="colorStr"></p>  
         <div id="div1" style="width:100px;height:100px"></div>  
     </body>  
 </html>  

2、之后是核心的脚本：

[javascript]view plaincopyprint? 
   
 <script>  
     //颜色字符串  
     var colorStr="";  
     //字符串的每一字符的范围  
     var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];  
     //产生一个六位的字符串  
     for(var i=0;i<6;i++){  
         //15是范围上限，0是范围下限，两个函数保证产生出来的随机数是整数  
         colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];  
     }  
     document.getElementById("colorStr").innerHTML="颜色为：#"+colorStr;  
     document.getElementById("div1").style.backgroundColor="#"+colorStr;  
 </script>  

空-城旧-梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js产生随机颜色

1、首先是一个HTML布局，p标签是是用来放当前颜色的，div的背景颜色就是这个颜色[html] view plaincopyprint?> html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8">
复制链接

扫一扫