返回jQuery获......登陆

jQuery获取随机颜色

手机用户3522113522018-12-23 10:11:36225

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送