获取随机颜色

Original 2018-12-06 17:32:44 190
abstract:<!DOCTYPE html> <html>    <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8&
<!DOCTYPE html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>获取随机色</title>
     <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
    a {
      float:left;
      display:block;
      margin:50px;
      width:100px;
      line-height: 100px;
      text-align: center;
      height:100px;
      color:#fff;
      border-radius: 50px;
      text-decoration: none;
    }
    </style>

    <script type="text/javascript">
      //改变标签的背景颜色
        function aa(tag) {
           var len=document.getElementsByTagName(tag).length
           for(var i=0;i<len;i++){
            document.getElementsByTagName(tag)[i].style.backgroundColor=bg()
           }
        }
        function bg(){//在老师的基础上稍微改了一下,将获取背景颜色的代码单独提出来
             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+")";
         };
         
        $(document).ready(function(){
            aa('a')
           $('a').mouseover(function(){
            $bg=$(this).css('backgroundColor')
            $(this).css('box-shadow','0px 0px 20px '+$bg)
            $(this).css('border-radius','20px ')
           })
            $('a').mouseleave(function(){
            $(this).css('box-shadow','none')
            $(this).css('border-radius','50px ')
           })
        })
    </script>
   </head>
   <body>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
   </body>
</html>

获取随机颜色的其他方法暂时没有想到(或者使用固定的集中颜色从其中随机?但是这并不是完全随机,所以放弃这个观点),难点还是在随机上,如何随机获取,大多还是分别获取R,G,B的十六进制码进行拼起来获取随机值得到,暂时想不到好办法,因此只是在老师的基础上稍微改了一点,将获取背景颜色的代码单独提出来写(写了一些都实现不了,暂时放弃,学多了再继续)。

Correcting teacher:查无此人Correction time:2018-12-06 17:37:29
Teacher's summary:嗯,写的不错。逻辑很清晰。每个功能都有很多方法实现,多看看别人的写法就会了。

Release Notes

Popular Entries