abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Js/Jq刷新隨便變色學(xué)習(xí)總結(jié)</title> <script type="text/javascript" src=&q
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js/Jq刷新隨便變色學(xué)習(xí)總結(jié)</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;line-height: 100px; margin: 10px;float: left;color: #fff; border-radius: 50px;text-align: center;}
</style>
<script>
function bscolor(Tag){
//聲明變量 len 賦值到所有dom數(shù)量
var len = document.getElementsByTagName(Tag).length;
// for循環(huán) 當(dāng)len大于i的時候條件成立 i++
for(var i=0;i<len;i++){
// 獲取到所有的Tag標(biāo)簽修改其樣式
document.getElementsByTagName(Tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
}
}
$(document).ready(function(){
// 執(zhí)行函數(shù)把div元素傳參到j(luò)s函數(shù)方法
bscolor('div')
$('div').mouseover(function(){
// $bg獲取DIV的背景色 聲明this是指向的是div
$bg=$(this).css('backgroundColor')
// 設(shè)置div的光暈效果 注意設(shè)置0xp 0px 20px后面一定要加一個空格
$(this).css('boxShadow','0px 0px 20px '+$bg)
// 設(shè)置div的邊框發(fā)生變化 設(shè)置20px
$(this).css('borderRadius','20px')
})
$('div').mouseleave(function(){
// 隱藏之前設(shè)置的光暈樣式
$(this).css('boxShadow','none')
// 還原div原始的圓角邊框
$(this).css('borderRadius','50px')
})
})
</script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
Professeur correcteur：滅絕師太Temps de correction：2018-12-05 09:28:04
Résumé du professeur：完成的不錯，作業(yè)和備注也很詳細(xì)，基礎(chǔ)的知識是非常潤物細(xì)無聲的，要好好掌握！繼續(xù)加油！