サマリー：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery隨機(jī)色</title> <style type="text/css"> * { margin: 0; padding: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery隨機(jī)色</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
width: 70px;
height: 70px;
border-radius: 50px;
text-decoration: none;
float: left;
display: block;
text-align: center;
line-height: 70px;
margin: 50px;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
function aa(tag) {
// 獲取標(biāo)簽 tag 以及他的長度.lenght 存儲(chǔ)到變量 len
var len = document.getElementsByTagName(tag).length
// 遍歷標(biāo)簽名字
for(var i = 0; i < len; i++) {
// 遍歷一次獲取一次tag并添加下表 [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()獲取0-1的隨機(jī)數(shù)
// 總結(jié)：定義函數(shù) 并給他一個(gè)參數(shù)tag還要獲取tag的長度遍歷tag的長度，每一次的遍歷都要獲取當(dāng)前的下標(biāo)并且修改他的倍經(jīng)驗(yàn)色 通過隨機(jī)數(shù) 并取整3次 獲取rgb的3個(gè)值也就是組合起來的隨機(jī)顏色jQuery調(diào)用aa加以參數(shù)a 把當(dāng)前背景顏色存儲(chǔ)于變量$bg中 然后修改當(dāng)前css的陰影與bg相同最后鼠標(biāo)離開時(shí)恢復(fù)正常css初始樣式
$(document).ready(function() {
// 調(diào)用aa參數(shù)為a
aa('a')
$('a').mousemove(function() {
// 鼠標(biāo)移動(dòng)獲取當(dāng)前背景色
$bg = $(this).css('backgroundColor')
// 當(dāng)前背景色 添加陰影
$(this).css('box-shadow','0px 0px 20px' + $bg)
// 修改當(dāng)前圓角
$(this).css('border-radius', '10px')
})
// 鼠標(biāo)離開 圓角 陰影恢復(fù)如初
$('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>
添削の先生：韋小寶添削時(shí)間：2018-11-28 18:10:52
先生のまとめ：嗯！寫的很不錯(cuò)哦！很完整！不錯(cuò)課后多找點(diǎn)這種小案例來多練習(xí)練習(xí)哦！