获取随机颜色

原创 2019-06-01 16:11:04 133
摘要:<!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.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>


批改老师:天蓬老师批改时间:2019-06-03 09:40:12
老师总结:获取随机数, jQuery 也有对应的静态方法的, 可以去查一查手册, 不一定要用原生的

发布手记

热门词条