abstract:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&
<!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>
Correcting teacher:西门大官人Correction time:2019-04-09 09:48:35
Teacher's summary:1、计算机颜色表示:RGB,每个颜色的数字范围:0-255
2、随机生成三个0-255的数字,就能表示一个随机的颜色
3、JS随机数生成,Math.random(),它会产生0-1之间的小数
4、把Math.random生成的数乘以255,再取整就可以拿到0-255之间的随机数
5、把生成的随机颜色设置给元素的背景色就可以了