jQuery获取随机颜色

Original 2018-12-23 10:11:36 225
abstract:<!doctype html><html><head>  <meta charset="utf-8">  <title>获取随机色</title>  <script type="text/JavaScript" src="jQuery/jqu

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>获取随机色</title>

  <script type="text/JavaScript" src="jQuery/jquery-3.3.1.min.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='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'

      }

    }

    $(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>


Correcting teacher:天蓬老师Correction time:2018-12-23 10:54:53
Teacher's summary:两点不足: 1、函数的命名没有做到见名知意。这在真实开发中是不允许的 2、js语句后面缺少分号,这样的写法不利于团队开发。

Release Notes

Popular Entries