摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>獲取隨機(jī)顏色</title> <script type="text/javascript" src="jquer
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>獲取隨機(jī)顏色</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style> *{margin:0px;padding: 0px} a{ text-decoration: none; display: block; margin:100px; float:left; width:100px; height:100px; background: pink; text-align: center; line-height: 100px; border-radius:50px; } </style> <script type="text/javascript"> //改變標(biāo)簽的背景顏色 function changecolor(tag){ var len=document.getElementsByTagName(tag).length //獲取標(biāo)簽長度 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)+","+Math.floor(Math.random()*256)+")" //獲取隨機(jī)整數(shù)顏色值 } } $(document).ready(function(){ changecolor('a') $('a').mouseover(function(){ $bg=$(this).css('backgroundColor') //獲取當(dāng)前背景顏色 $(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> Math.random():獲取0-1隨機(jī)數(shù) Math.floor():返回小于或者等于一個(gè)給定數(shù)字的最大整數(shù) Math.floor(Math.random()*256) 得到一個(gè)>=0且小于256的隨機(jī)整數(shù) document.getElementsByTagName(tag) 通過標(biāo)簽名獲得元素
批改老師:滅絕師太批改時(shí)間:2018-11-29 16:40:55
老師總結(jié):可以嘗試不同寫法,需要注意加號(hào)連接符的使用,不細(xì)心的時(shí)候容易出錯(cuò)!