jquery随机颜色

Original 2019-05-07 14:29:42 246
abstract:<!DOCTYPE html><html><head>  <meta charset="utf-8"> <title></title>  <script type="text/javascript" src="jquery-3.4.0.min.js&q

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

<title></title>


  <script type="text/javascript" src="jquery-3.4.0.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++){

        //获取定义i,产生reb颜色三个值

        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')//获取随机产生的rgb颜色值并应用到光晕颜色

          $(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:2019-05-08 09:08:55
Teacher's summary:完成的不错。每行js语句结束增加;号。继续加油

Release Notes

Popular Entries