Html+Css+Js随机生成颜色 RGB

最新推荐文章于 2024-10-13 13:13:02 发布

gly_technology

最新推荐文章于 2024-10-13 13:13:02 发布

阅读量1.3k

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/gly_technology/article/details/122661474

版权

Html部分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       <div id="box">
           <div id="result"></div>
           <input type="button" value="随机生成颜色" οnclick="panduan()" />
       </div>
   </body>
</html>

Css部分

* {
margin: 0;
padding: 0;
}

#box {
   width: 30%;
   height: 300px;
   margin: 100px auto;
   border: solid 1px #ccc;
   padding-top: 100px;
}

#box div {
   width: 200px;
   height: 200px;
   margin: 0px auto;
   text-align: center;
}

input {
   float: right;
   margin-right: 10%;
   text-align: center;
}

Js部分

function panduan() {
   var result = document.getElementById('result');
   var r = Math.round(Math.random() * 256);
   var g = Math.round(Math.random() * 256);
   var b = Math.round(Math.random() * 256);
   result.style.background = "rgb(" + r + "," + g + "," + b + ")";
}