摘要:<!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>獲取隨機(jī)色</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>
批改老師:西門(mén)大官人批改時(shí)間:2019-04-09 09:48:35
老師總結(jié):1、計(jì)算機(jī)顏色表示:RGB,每個(gè)顏色的數(shù)字范圍:0-255
2、隨機(jī)生成三個(gè)0-255的數(shù)字,就能表示一個(gè)隨機(jī)的顏色
3、JS隨機(jī)數(shù)生成,Math.random(),它會(huì)產(chǎn)生0-1之間的小數(shù)
4、把Math.random生成的數(shù)乘以255,再取整就可以拿到0-255之間的隨機(jī)數(shù)
5、把生成的隨機(jī)顏色設(shè)置給元素的背景色就可以了