摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jQuery/jquery-3.3.1.min.js"></scr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jQuery/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
a,p{
text-decoration: none;
width:100px;
height:100px;
border-radius: 50px;
display: inline-block;
line-height: 100px;
text-align: center;
color:red;
margin-right:50px;
}
.but{
display:block;
margin-left: 300px;
padding: 10px;
font-size:20px;
font-weight:bold;
}
</style>
<script>
//改变标签的背景颜色
function aa(tag) { //建立自定义函数 函数名aa 参数名tag
var len=document.getElementsByTagName(tag).length //获得到参数标签的的长度赋值给变量len
for(var i=0;i<len;i++){ //for循环 值小于参数标签变量len 时变量i增加1
//参数标签数组长度的CSS样式颜色为 rgb颜色'（值1，值2，值3)' Math.floor（）四舍五入； Math.random（）0-1的随机值；
document.getElementsByTagName(tag)[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
}
}
$(document).ready(function(){
$('.but').click(function(){ //点击变色及更改数字
aa('p') //给函数aa参数传参 点击此时变色
aa('a')
$('p,a').text(Math.floor(Math.random()*100)) //Math.floor四舍五入、Math.random随机0-1之间数值、 点击更改数字
})
$('p,a').mouseover(function(){ //获得p和a标签 鼠标移上事件
$bg=$(this).css('backgroundColor') //获取当前元素标签CSS 背景颜色的属性值并赋值给变量bg
$(this).css('boxShadow','0px 0px 50px '+$bg) //给当前元素添加外部阴影为当前元素背景色 注：变量值在引号外部+添加
$(this).css('borderRadius','20px ') //给当前标签元素添加圆角效果到20px;
})
$('p,a').mouseleave(function(){ //鼠标移出事件
$(this).css('box-shadow','none')
$(this).css('border-radius','50px ')
})
})
</script>
</head>
<body>
<a href="">0</a>
<a href="">0</a>
<a href="">0</a>
<a href="">0</a>
<p>0</p>
<p>0</p>
<p>0</p>
<button class="but">点击变色及更改数字</button>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-14 09:34:08
老师总结：获取元素, 可以统一用jquery, 不要混写
