摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq获取随机颜色</title> <script src="../jquery-3.3.1.min.js"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq获取随机颜色</title>
<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{margin:0px;padding: 0px;}
ul , li {margin:0px;padding:0px;list-style: none;}
ul div {margin-bottom:28px;}
ul {margin:20px auto;width:310px;text-align: center;}
li{float:left;width:50px;height:50px;background:#aaa;margin-left:20px;line-height: 50px;border-radius:50%;color:#fff;font-size:18px;font-weight:600;cursor:-webkit-grab;}
.boxBtn{width:100px;margin:0px auto;}
.boxBtn input{width:100%;background:-webkit-linear-gradient(#f11,#e29);border:none;border-radius: 3px;height:30px;color:#fff;}
/* 清除浮动且自动占位 */
.cle:after , .cle:before{
content:"";
display: block;
clear: both;
}
/* 隐藏的类 */
.boxHidd{
display: none;
}
.boxShow{
display: block;
}
</style>
</head>
<body>
<ul class="cle">
<div class="cle">
<li>灭</li>
<li>绝</li>
<li>师</li>
<li>太</li>
</div>
<div class="boxHidd cle ">
<li>独</li>
<li>步</li>
<li>天</li>
<li>下</li>
</div>
</ul>
<div class="boxBtn">
<input type="button" onclick="OliShow()" value="点击按钮">
</div>
<script type="text/javascript">
// 当文档加载完成之后
$(document).ready(function(){
//获取到li
var ArroLi = $('ul li');
//for循环设置背景颜色
for(var i=0;i<ArroLi.length;i++){
var color = "RGB(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) +")"
ArroLi[i].style.backgroundColor = color;
}
//给li添加事件
$('li').mouseover(function(){
//获取到背景颜色
$bg=$(this).css('backgroundColor');
//添加对应的css样式
$(this).css({
'box-shadow':'1px 2px 10px '+$bg,
'border-radius':'5px'
});
});
//给li添加鼠标离开事件
$('li').mouseleave(function(){
// 设置css样式
$(this).css({
'box-shadow':'none',
'border-radius':'50%'
});
});
});
//点击按钮显示
function OliShow(){
$('.boxHidd').addClass('boxShow');
}
// 鼠标滑动事件
</script>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-15 09:09:29
老师总结：缺少总结！代码很完整！下次记得带上自己的总结哦！继续加油吧！！！
