JQ做随机颜色的变换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq获取随机颜色</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
a{float: left;display:block;margin: 50px;width: 100px;text-align: center;height: 100px;line-height: 100px;color: #ccc;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>
<script type="text/javascript">
//改变标签的背景颜色
function bq(tag) {
var len=document.getElementsByTagName(tag).length//获取a标签及标签的长度
for(var i=0;i<len;i++){
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(){
bq('a')//调用刚才做的bq这个函数，传入的这个参数是a链接
$('a').mouseover(function(){
$bg=$(this).css('backgroundColor')//获取当前a链接的背景色
$(this).css('box-shadow','0px 0px 20px '+$bg)//链接根据当前的背景色产生光晕
$(this).css('border-radius','20px ')//链接变成圆角
})//鼠标移上链接时，触发一个事件，改变背景颜色、产生光晕，改变形状
$('a').mouseleave(function(){
$(this).css('box-shadow','none')
$(this).css('border-radius','50px ')
})//鼠标移出时，形状恢复圆形，去除光晕效果
})
</script>
</body>
</html>
本作业涉及的新知识点：
1、math.random():获取一个随机值
2、math.floor():如果获取的是小数，进行四舍五入