<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击颜色变化</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
a{width: 200px;height: 200px;display:block;background-color: #f40;border-radius: 100px;float: left;text-align:center;line-height: 200px;color: #fff; text-decoration: none;margin:50px;}
button{width: 100px;height:40px;margin-left: 700px;border: none;background-color: pink;border-radius: 10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('#1').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#2').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#3').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#4').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
$('#5').css('background-color','rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')').text(Math.floor(Math.random()*1000))
})
$('a').hover(function(){
$bg=$(this).css('backgroundColor')
$(this).css('borderRadius','30px' )
$(this).css('box-shadow','0px 0px 30px ' +$bg)
},function(){
$(this).css('borderRadius','100px' )
$(this).css('box-shadow','none ')
})
})
</script>
</head>
<body>
<a href="" id="1">1</a>
<a href="" id="2">2</a>
<a href="" id="3">3</a>
<a href="" id="4">4</a>
<a href="" id="5">5</a>
<button>变色</button>
</body>
</html>
