摘要：<!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>再刷新随机色的基础上，点击按钮随机改变背景颜色值和数值</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>点击切换</button> <a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</body>
</html>
批改老师：查无此人批改时间：2019-02-27 09:14:30
老师总结：完成的不错。jQuery相比js简单，要多练习，代码效率就会提高。继续加油
