摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq獲取隨機顏色</title><script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq獲取隨機顏色</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
a{float: left;display:block;margin: 50px;width: 100px;text-align: center;height: 100px;line-height: 100px;color: #ccc;border-radius: 50px;text-decoration: none;}
</style>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<script type="text/javascript">
//改變標簽的背景顏色
function bq(tag) {
var len=document.getElementsByTagName(tag).length//獲取a標簽及標簽的長度
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)+')'
}//每循環(huán)一次改變一次背景的顏色
}
$(document).ready(function(){
bq('a')//調(diào)用剛才做的bq這個函數(shù)，傳入的這個參數(shù)是a鏈接
$('a').mouseover(function(){
$bg=$(this).css('backgroundColor')//獲取當前a鏈接的背景色
$(this).css('box-shadow','0px 0px 20px '+$bg)//鏈接根據(jù)當前的背景色產(chǎn)生光暈
$(this).css('border-radius','20px ')//鏈接變成圓角
})//鼠標移上鏈接時，觸發(fā)一個事件，改變背景顏色、產(chǎn)生光暈，改變形狀
$('a').mouseleave(function(){
$(this).css('box-shadow','none')
$(this).css('border-radius','50px ')
})//鼠標移出時，形狀恢復圓形，去除光暈效果
})
</script>
</body>
</html>
本作業(yè)涉及的新知識點：
1、math.random():獲取一個隨機值
2、math.floor():如果獲取的是小數(shù)，進行四舍五入
批改老師：天蓬老師批改時間：2019-02-11 11:31:20
老師總結(jié)：其實就是用原生Math對象方法來操作的, 與jQuery無關
, 原生的內(nèi)置對象功能非常豐富,jQuery只是js一個普通函數(shù)庫罷 了 , 不要忽略原生js的學習