abstrak:<!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>
Guru membetulkan:滅絕師太Masa pembetulan:2018-12-05 09:28:04
Rumusan guru:完成的不錯,作業(yè)和備注也很詳細(xì),基礎(chǔ)的知識是非常潤物細(xì)無聲的,要好好掌握!繼續(xù)加油!