摘要:老師講的很清楚 但是理解有點(diǎn)理解不太明白 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0
老師講的很清楚 但是理解有點(diǎn)理解不太明白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding: 0px;list-style: none;margin:0px auto;}
a{float: left;
display: block;
width: 80px;
height: 80px;
background-color: #ccc;
margin:20px;
line-height: 100px;
text-align: center;
text-decoration: none;
border-radius: 50px;
}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function bb(adc){ //命名
var len=document.getElementsByTagName(adc).length //聲明變量獲取標(biāo)簽元素 獲取命名的標(biāo)簽長(zhǎng)度
for(var i=0;i<len;i++){//for循環(huán)初始化變量i=0,循環(huán)條件i<len,循環(huán)不長(zhǎng) I++
document.getElementsByTagName(adc)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')' //獲取abc的元素 找到下面的[i]連接css的背景顏色,rgb的顏色值 rag獲取值 Math.random獲取隨機(jī)顏色值*256 在256個(gè)顏色值選擇的 選取后面的小數(shù)Math.floor四舍五入的方法
}
}
$(document).ready(function(){
bb('a') //調(diào)用bb的函數(shù)
$('a').mouseover(function(){ //移動(dòng)上面的效果
$bg=$(this).css('backgroundColor') //聲明bg 獲取當(dāng)前的背景色
$(this).css('box-shadow','0px 0px 20px '+$bg)//給陰影 在獲取背景
$(this).css('border-radius','20px ') //給邊框給20個(gè)px的變形
})
$('a').mouseleave(function(){ //當(dāng)鼠標(biāo)移出
$(this).css('box-shadow','none')//移除后 去除陰影
$(this).css('border-radius','50px ') //在給邊框50的變形
})
})
</script>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">5</a>
<a href="">6</a>
</body>
</html>
批改老師:天蓬老師批改時(shí)間:2018-12-21 13:01:13
老師總結(jié):如果不是很清楚,可以在群中或發(fā)工單, 其實(shí)這個(gè)作業(yè)是考察你對(duì)js中的Math對(duì)象中的一些方法的使用