????:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> a{display: block;height: 100px;width: 100px;border-radi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
a{display: block;height: 100px;width: 100px;border-radius: 50px;text-align: center;line-height: 100px;float: left;margin: 40px;text-decoration: none;}
</style>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
// function change(tag){
var Ele = document.getElementsByTagName('a')
for (var i=0;i<Ele.length;i++) {
var r = Math.floor(Math.random()*256)
var g = Math.floor(Math.random()*256)
var b = Math.floor(Math.random()*256)
Ele[i].style.backgroundColor = 'rgb('+r+','+g+','+b+')'
}
$('a').mouseover(function(){
$bg = $(this).css('backgroundColor')
$(this).css('box-shadow','0 0 20px '+$bg)
$(this).css('border-radius','20px')
})
$('a').mouseleave(function(){
//$(this).removeAttr('box-shadow')
$(this).css('box-shadow','none')
$(this).css('border-radius','50px')
})
// }
// change('a')
</script>
</html>
思路:先找到a標簽,然后通過for循環(huán)獲取a標簽的長度,給每個遍歷的a標簽通過rgb()設置隨機色
Math.random()*256獲取0-256之間的一個隨機數(shù),通過Math.floor()返回一個整數(shù)
當鼠標劃過時改變當前標簽的樣式,當鼠標離開時還原標簽樣式
總結:Math.random()返回0-1之間的一個隨機數(shù) Math.floor(x)返回小于等于x的最大整數(shù) rgb()顏色值為整數(shù)
rgb()寫法 'rgb('+r+','+g+','+b+')' 字符串類型,不需再加大引號
box-shadow寫法 '0 0 20px '+$bg
$(this).removeAttr('box-shadow')無效 removeAttr移除的是元素自有屬性
?? ???:滅絕師太?? ??:2018-11-21 16:36:09
???? ??:完成的很棒,主要是理解的好,好習慣繼續(xù)保持!