abstrakt：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>獲取隨機(jī)顏色</title><!-- 引入線上jquery文件 --><script src="https://code.jqu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取隨機(jī)顏色</title>
<!-- 引入線上jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
a{
width:150px;
height:150px;
line-height:150px;
display: inline-block;
font-size:12px;
margin-left:10px;
border-radius:50%;
text-align:center;
text-decoration:none;
}
a:hover{
cursor:pointer;
}
button{
width:80px;
height:30px;
line-height:30px;
margin-left:10px;
margin-top:10px;
border:none;
}
p{
width:150px;
text-align:center;
}
</style>
<script type='text/javascript'>
// 隨機(jī)數(shù) 函數(shù)
function Rand(min,max){
return Math.floor(Math.random() * (max - min + 1) );
}
// 隨機(jī)背景色 函數(shù)
function randRGB(){
return 'rgb(' + Rand(0,255) + ',' + Rand(0,255) + ',' + Rand(0,255) + ')';
}
$(document).ready(function(){
var rand_rgb = '';
// 遍歷a標(biāo)簽
$('a').each(function(){
// 調(diào)用隨機(jī)背景色并賦值給rand_rgb
rand_rgb = randRGB();
// 設(shè)置背景 并 顯示背景 值
$(this).css('backgroundColor',rand_rgb).text(rand_rgb);
// 添加hover效果
$(this).hover(
function(){
$(this).stop().animate({'fontSize':'18px','borderRadius':'30px','boxshadow':'0px 0px 30px' + rand_rgb},500);
},function(){
$(this).stop().animate({'fontSize':'12px','borderRadius':'50%','boxshadow':'none'},500);
}
);
// 添加點擊效果
$(this).click(function(){
// 調(diào)用隨機(jī)背景色并賦值給rand_rgb
rand_rgb = randRGB();
// 設(shè)置a標(biāo)簽背景 并 顯示背景 值
$(this).css('backgroundColor',rand_rgb).text(rand_rgb);
});
});
//遍歷button標(biāo)簽
$('button').each(function(val){
// 添加點擊效果
$(this).click(function(){
// 調(diào)用隨機(jī)背景色并賦值給rand_rgb
rand_rgb = randRGB();
// 設(shè)置a標(biāo)簽背景 并 顯示背景 值
$(this).parents('div').children('a').css('backgroundColor',rand_rgb).text(rand_rgb);
});
});
});
</script>
</head>
<body>
<div><a>1</a><p><button>隨機(jī)顏色</button></p></div>
<div><a>2</a><p><button>隨機(jī)顏色</button></p></div>
<div><a>3</a><p><button>隨機(jī)顏色</button></p></div>
<div><a>4</a><p><button>隨機(jī)顏色</button></p></div>
<div><a>5</a><p><button>隨機(jī)顏色</button></p></div>
</body>
</html>
Korrigierender Lehrer：西門大官人Korrekturzeit：2019-02-17 10:13:26
Zusammenfassung des Lehrers：作業(yè)寫的很好，綜合運用了js和jquery動畫。注釋也很詳細(xì)