jquery 随机显示颜色

原创2018-11-21 09:13:3871
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>随机颜色</title>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机颜色</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>

        a{
            text-align: center;
            line-height: 100px;
            margin: 0 20px;
            border: 1px solid #000000;
            display: block;
            width: 100px;
            height: 100px;
            float: left;
            text-decoration: none;
            border-radius: 50px;

        }
    </style>
</head>
<body>

    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">6</a>
    <a href="">6</a>
    <a href="">6</a>
    <a href="">6</a>
    <a href="">6</a>
    <a href="">6</a>




    <script>
        $(document).ready(function () {
          var aa= $('a').length;
           // $('a').eq(0).css('background','red');
 for (i=0;i<aa;i++){
                $('a').eq(i).css('backgroundColor','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256))+')';
            }
$('a').mouseover(function () {
    $(this).css('border-radius','20px');
    $(this).css('backgroundColor','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256))+')';

});

            $('a').mouseleave(function () {
                $(this).css('border-radius','50px');

            })

        })
    </script>

</body>
</html>


批改老师:天蓬老师批改时间:2018-11-21 09:16:12
老师总结:javascript中的Math对象方法非常多,功能也很强大,但常用的方法并不多,抽空看手册,将这些方法过一遍

发布手记

热门词条