<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机颜色</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
a{
text-align: center;
line-height: 100px;
margin: 0 20px;
border: 1px solid #000000;
display: block;
width: 100px;
height: 100px;
float: left;
text-decoration: none;
border-radius: 50px;
}
</style>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">6</a>
<a href="">6</a>
<a href="">6</a>
<a href="">6</a>
<a href="">6</a>
<a href="">6</a>
<script>
$(document).ready(function () {
var aa= $('a').length;
// $('a').eq(0).css('background','red');
for (i=0;i<aa;i++){
$('a').eq(i).css('backgroundColor','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256))+')';
}
$('a').mouseover(function () {
$(this).css('border-radius','20px');
$(this).css('backgroundColor','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256))+')';
});
$('a').mouseleave(function () {
$(this).css('border-radius','50px');
})
})
</script>
</body>
</html>
