摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<title>Document</title>
<style>
a{width:80px;height:80px;display: inline-block;background-color:lightcoral;
border-radius:50%;text-align: center;line-height: 80px;color:#fff;font-weight: bold;}
.div2{width:450px;height:100px;text-align: left;}
.div2 button{margin:10px 15px;}
</style>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<div class="div2">
<button>按钮</button>
</div>
<script>
function aa(){
var len = document.getElementsByTagName('a').length;
for(var i = 0; i < len; i++){
var rgb ='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
document.getElementsByTagName('a')[i].style.backgroundColor=rgb;
}
}
$(document).ready(function(){
aa()
$('button').click(function(){
aa()
$('a').text(Math.floor(Math.random()*256))
})
$('a').mouseover(function(){
$(this).css({'border-radius':'10%','box-shadow':'0px 0px 10px '})
})
$('a').mouseout(function(){
$(this).css({'border-radius':'50%','box-shadow':''})
})
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-22 16:33:29
老师总结：写的很不错 这种小案例 对我们的基础掌握会有很大的帮助
