<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js/Jq刷新随便变色学习总结</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;line-height: 100px; margin: 10px;float: left;color: #fff; border-radius: 50px;text-align: center;}
</style>
<script>
function bscolor(Tag){
//声明变量 len 赋值到所有dom数量
var len = document.getElementsByTagName(Tag).length;
// for循环 当len大于i的时候条件成立 i++
for(var i=0;i<len;i++){
// 获取到所有的Tag标签修改其样式
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(){
// 执行函数把div元素传参到js函数方法
bscolor('div')
$('div').mouseover(function(){
// $bg获取DIV的背景色 声明this是指向的是div
$bg=$(this).css('backgroundColor')
// 设置div的光晕效果 注意设置0xp 0px 20px后面一定要加一个空格
$(this).css('boxShadow','0px 0px 20px '+$bg)
// 设置div的边框发生变化 设置20px
$(this).css('borderRadius','20px')
})
$('div').mouseleave(function(){
// 隐藏之前设置的光晕样式
$(this).css('boxShadow','none')
// 还原div原始的圆角边框
$(this).css('borderRadius','50px')
})
})
</script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
