摘要:<!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
老师总结:缺少总结!代码很完整!下次记得带上自己的总结哦!继续加油吧!!!