<!DOCMENT TYPE>
<head>
<title>课后练习-jQuery获取随机色</title>
<style type="text/css">
*{margin:0;padding: 0;}
a {float: left;margin:50px;width: 100px;height:100px;display: block;line-height: 100px;text-align: center;border-radius: 50px;text-decoration: none;color:#fff;}
button{width: 100px;height: 40px;font-size: 22px;position: absolute;top:200px;left:350px;}
</style>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function changColor(tag){
var len=document.getElementsByTagName(tag).length;
for(var i=0;i<len;i++){
document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
document.getElementsByTagName(tag)[i].innerText=Math.floor(Math.random()*10);
}
}
$(function() {
changColor('a');
$('button').click(function(){
changColor('a');
})
$('a').hover(
function(){
$bg=$(this).css('backgroundColor');
$(this).css('boxShadow','0px 0px 20px '+$bg);
$(this).css('borderRadius','10px');
},
function(){
$bg=$(this).css('backgroundColor');
$(this).css('boxShadow','none');
$(this).css('borderRadius','50px');
})
});
</script>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<button>换色</button>
</body>
</html>
