js 模拟百度音乐-全选操作

来源：互联网发布：plsql数据库建表编辑：程序博客网时间：2024/06/06 09:05

效果图大致如下：

添加删除按钮暂时没写事件的发生哦！

代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } .box{ width: 340px; height: 360px; margin: 50px auto; border: 1px #999 solid; } .box ul li{ width: 340px; height: 50px; display: block; border-bottom: 1px #fff solid; } .box ul li p{ display: inline-block; width: 250px; margin-left:10px; } .box input{ margin-left: 30px; margin-top: 20px; } .check{ width: 340px; height: 50px; border-top: 1px #999 solid; } </style> </head> <body> <div class="box"> <ul id="ul"> <li> <input type="checkbox" > <p>私奔                 梁博</p> </li> <li> <input type="checkbox" > <p>北京北京             梁博，黄勇</p> </li> <li> <input type="checkbox" > <p>我爱你中国           梁博</p> </li> <li> <input type="checkbox" > <p>花火                 梁博</p> </li> <li> <input type="checkbox" > <p>回来                 梁博</p> </li> <li> <input type="checkbox" > <p>爱要有你才完美       梁博，那英</p> </li> </ul> <div class="check"> <input id="btn" type="checkbox" value="全选"> <input type="button" value=" 收藏"> <input type="button" value="+ 添加"> <input type="button" id="btn2" value="× 删除"> </div> </div> <script type="text/javascript"> var oUL=document.getElementById('ul'); var aLi=oUL.getElementsByTagName('li'); var btn=document.getElementById("btn"); var btn2=document.getElementById('btn2'); var arr=['pink','rgb(237,255,255)']; var str=''; for(var i=0;i<aLi.length;i++){ aLi[i].style.background=arr[i%2]; aLi[i].onmouseover=function(){ str=this.style.background; this.style.background="rgb(239,210,210)"; } aLi[i].index=i; aLi[i].onmouseout=function(){ this.style.background=str; } } btn.onclick=function(){ var aInput=oUL.getElementsByTagName('input'); for(var i=0;i<aInput.length;i++ ){ aInput[i].checked=!aInput[i].checked; } } </script> </body> </html>

阅读全文

0 0