摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>再刷新隨機(jī)色的基礎(chǔ)上，點(diǎn)擊按鈕隨機(jī)改變背景顏色值和數(shù)值</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
a {
float: left;
display: block;
margin:50px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
text-decoration: none;
color: #fff;
}
.btn {
float: left;
background: red;
width: 100px;
height: 30px;
color: #fff;
border: 0;
line-height: 30px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var len = $('a').length;
for (var i = 0; i < len; i++) {
$('a').eq(i).css('background', 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')')
}
$('.btn').click(function() {
for (var i = 0; i < len; i++) {
$('a').eq(i).css('background', 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')')
$('a').eq(i).text(+Math.floor(Math.random() * 255))
}
})
$('a').mouseover(function() {
$bg = $(this).css('backgroundColor');
$(this).css('box-shadow', '0px 0px 20px ' + $bg);
$(this).css('border-radius', '20px ')
})
$('a').mouseleave(function() {
$bg = $(this).css('backgroundColor');
$(this).css('box-shadow', 'none');
$(this).css('border-radius', '100px')
})
})
</script>
<button>點(diǎn)擊切換</button> <a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</body>
</html>
批改老師：查無(wú)此人批改時(shí)間：2019-02-27 09:14:30
老師總結(jié)：完成的不錯(cuò)。jQuery相比js簡(jiǎn)單，要多練習(xí)，代碼效率就會(huì)提高。繼續(xù)加油