abstract:<!DOCTYPE html><html> <head> &nb
<!DOCTYPE html>
<html>
<head>
<title>获取随机色</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
a{float:left;width:100px;height:100px;line-height:100px;text-align:center;margin:30px;
border-radius:50%;background:pink;display:block;text-decoration:none;}
.clear{clear:both;}
#btn{margin-left:290px;}
</style>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<div class="clear"></div>
<button id='btn'>更换颜色</button>
<script>
var dTag=document.getElementsByTagName('a');
console.log(dTag);
function changeColor(){
for(var i=0;i<dTag.length;i++){
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
dTag[i].style.backgroundColor='rgb('+r+','+g+','+b+')';
dTag[i].innerHTML=""+r+g+b;
}
}
$(function(){
$('#btn').click(function(){
changeColor();
})
$('a').mouseover(function(){
$bg=$(this).css('backgroundColor');
$(this).css('borderRadius','10px');
$(this).css('box-shadow','0px 0px 20px '+$bg);
})
$('a').mouseleave(function(){
$bg=$(this).css('backgroundColor');
$(this).css('borderRadius','50%');
$(this).css('box-shadow','0px 0px 20px '+$bg);
})
})
// document.write(Math.round(Math.random()*255));
</script>
</body>
</html>
Correcting teacher:查无此人Correction time:2019-05-20 09:12:11
Teacher's summary:完成的不错。jq功能非常强大,要好好练习。继续加油。