摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery隨機色</title> <style type="text/css"> * { margin: 0; padding: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery隨機色</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) {
// 獲取標簽 tag 以及他的長度.lenght 存儲到變量 len
var len = document.getElementsByTagName(tag).length
// 遍歷標簽名字
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的隨機數(shù)
// 總結：定義函數(shù) 并給他一個參數(shù)tag還要獲取tag的長度遍歷tag的長度，每一次的遍歷都要獲取當前的下標并且修改他的倍經(jīng)驗色 通過隨機數(shù) 并取整3次 獲取rgb的3個值也就是組合起來的隨機顏色jQuery調用aa加以參數(shù)a 把當前背景顏色存儲于變量$bg中 然后修改當前css的陰影與bg相同最后鼠標離開時恢復正常css初始樣式
$(document).ready(function() {
// 調用aa參數(shù)為a
aa('a')
$('a').mousemove(function() {
// 鼠標移動獲取當前背景色
$bg = $(this).css('backgroundColor')
// 當前背景色 添加陰影
$(this).css('box-shadow','0px 0px 20px' + $bg)
// 修改當前圓角
$(this).css('border-radius', '10px')
})
// 鼠標離開 圓角 陰影恢復如初
$('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>
批改老師：韋小寶批改時間：2018-11-28 18:10:52
老師總結：嗯！寫的很不錯哦！很完整！不錯課后多找點這種小案例來多練習練習哦！