获取随机色并改变

Original 2018-12-31 10:18:23 164
abstract:<!DOCTYPE html><html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <tit


<!DOCTYPE html>

<html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

     <script type="text/javascript" src="../jquery-3.3.1.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 background(tag) {

           var model=document.getElementsByTagName(tag).length

           for(var i=0;i<model;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(){

            background('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-31 16:16:13
Teacher's summary:Math是js内置的对象之一,功能非常强大,更多的方法,可能到mdn上查看

Release Notes

Popular Entries