abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取随机色</title> <script type="text/javascript" src="jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取随机色</title> <script type="text/javascript" src="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> </head> <body> <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> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </body> </html>
Correcting teacher:灭绝师太Correction time:2018-11-28 14:06:46
Teacher's summary:完成的很好,注意拼接符的使用,必要的地方打上备注!