abstract：<!DOCTYPE html><html><head> <title>获取随机色</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>获取随机色</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
a{ float: left; display: block; margin:50px; width:100px; line-height: 100px; text-align: center; height: 100px; color:#fff;
border-radius: 50px; text-decoration: none;}
</style>
</head>
<body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<div style="clear:both;"></div>
<button>刷新颜色</button>
<script type="text/javascript">
//单击按钮刷新颜色
$(document).on('click','button',function(){
changeColor('a');
})
//改变标签的背景颜色
function changeColor(tag){
var title = document.getElementsByTagName(tag);
for(var i=0;i<title.length;i++){
title[i].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
}
}
$(document).ready(function(){
changeColor('a');
//鼠标放上效果
$('a').mouseover(function(){
var bg = $(this).css('backgroundColor');
$(this).css('box-shadow','0px 0px 20px '+ bg);
$(this).css('border-radius','20px');
});
//鼠标离开效果
$('a').mouseout(function(){
$(this).css('box-shadow','none');
$(this).css('border-radius','50px');
});
//点击改变随机值
$('a').click(function(){
var num =Math.floor(Math.random()*10000);
$(this).text(num);
});
})
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-06 09:27:25
Teacher's summary：完成的不错。js最重要的就是事件，要好好练习。继续加油。