随机色随机色随机色

原创 2019-04-01 23:20:14 277
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>随机色</title>    <script src="stat

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>随机色</title>
   <script src="static/jquery-3.3.1.min.js"></script>
   <style>
     div{
       width:450px;
       height:120px;
       margin:100px auto;
     }
     a{
       width:100px;
       height:100px;
       background:red;
       border-radius:50px;
       display:inline-block;
       line-height:100px;
       text-align:center;
       color:white;
       text-decoration:none;
     }
   </style>
</head>
<body>
<div>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
</div>
<script>
 function chageColor(ele) {
   var getEleObj = document.getElementsByTagName(ele);
   for(var i=0; i<getEleObj.length; i++){
     var r = Math.floor(Math.random()*256);
     var g = Math.floor(Math.random()*256);
     var b = Math.floor(Math.random()*256);
     getEleObj[i].style.background = "rgb("+r+","+g+","+b+")";
     getEleObj[i].innerHTML = r+","+g+","+b;
   }
 }
 chageColor("a");
 $(function(){
   $("a").click(function(){
     var r = Math.floor(Math.random()*256);
     var g = Math.floor(Math.random()*256);
     var b = Math.floor(Math.random()*256);
     $(this).css("background","rgb("+r+","+g+","+b+")");
     $(this).text(r+","+g+","+b);
   });
 })
</script>
</body>
</html>

批改老师:西门大官人批改时间:2019-04-02 11:21:29
老师总结:最好写一下实现原理: 计算机中的颜色是由rgb组成,r、g、b分别由0-255的整数组成。利用math生成r、g、b的随机值,可以组成随机的颜色

发布手记

热门词条