获取随机色及按钮获取值

Original 2019-05-18 21:13:24 156
abstract:<!DOCTYPE html><html>             <head>             &nb

<!DOCTYPE html>

<html>

             <head>

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

                             <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

                             <style type="text/css">

                             a{float:left;width:100px;height:100px;line-height:100px;text-align:center;margin:30px;

                               border-radius:50%;background:pink;display:block;text-decoration:none;}

                             .clear{clear:both;}

                             #btn{margin-left:290px;}

                             </style>

            </head>

                         <body>

                         <a href="">1</a>

                         <a href="">2</a>

                         <a href="">3</a>

                         <a href="">4</a>

                         <div class="clear"></div>

                         <button id='btn'>更换颜色</button>

             <script>

             var dTag=document.getElementsByTagName('a');

             console.log(dTag);

             function changeColor(){

             for(var i=0;i<dTag.length;i++){

             var r=Math.floor(Math.random()*255);

             var g=Math.floor(Math.random()*255);

             var b=Math.floor(Math.random()*255);

             dTag[i].style.backgroundColor='rgb('+r+','+g+','+b+')';

             dTag[i].innerHTML=""+r+g+b;

             }

             }

             $(function(){

             $('#btn').click(function(){

             changeColor();

            

             })

             $('a').mouseover(function(){

             $bg=$(this).css('backgroundColor');

             $(this).css('borderRadius','10px');

             $(this).css('box-shadow','0px 0px 20px '+$bg);

            

             })

             $('a').mouseleave(function(){

             $bg=$(this).css('backgroundColor');

             $(this).css('borderRadius','50%');

             $(this).css('box-shadow','0px 0px 20px '+$bg);

            

             })

             })

             // document.write(Math.round(Math.random()*255));

             </script>

             </body>

</html>


Correcting teacher:查无此人Correction time:2019-05-20 09:12:11
Teacher's summary:完成的不错。jq功能非常强大,要好好练习。继续加油。

Release Notes

Popular Entries