<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
a{
text-decoration: none;
display: inline-block;
float: left;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
margin: 0 10px;
border-radius: 50px;
}
.box{
width: 400px;
overflow: hidden;
margin:40px auto;
padding:10px 0;
}
button{
background: #108cee;
border: none;
margin-top: 10px;
font-size: 14px;
color: #fff;
width: 400px;
height: 40px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function box(num){
var t = document.getElementsByTagName(num).length;
for (var i = 0; i < t; i++) {
document.getElementsByTagName(num)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
};
}
$(function(){
box('a');
$('a').mouseover(function(){
$back_g=$(this).css('backgroundColor');
$(this).css('border-radius','10px');
$(this).css('color','#fff');
// jq内部的css值需要添加px 并且要有空格
$(this).css('box-shadow','0px 0px 10px '+$back_g);
})
$('a').mouseleave(function(){
$(this).css('border-radius','50px');
$(this).css('box-shadow','none')
})
$('a').click(function(){
$down = $(this).text(Math.floor(Math.random()*99))
})
$('button').click(function(){
refresh();
});
function refresh(){
window.location.reload();
}
})
</script>
<div>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<button>点击</button>
</div>
</body>
</html>
