首页 > 代码库 > 弱弱的小白记录之——面向对象实现简单的歌曲管理信息
弱弱的小白记录之——面向对象实现简单的歌曲管理信息
实现简单的面向对象方法来管理歌曲信息的增删改查。
数据驱动思想,也可以理解单项数据绑定,既:数据发生变化,页面也跟着变化;
思路:
使用构造函数来存储数据信息;
使用原型来存储方法(增删改查);
修改方式中方法使用到的数据,由变量转为对象的属性;
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container { margin: 100px auto; width: 850px; border: 1px solid #dad8d8; /*height: 100%;*/ } .songslist-main, .songslist-header { position: relative; width: 100%; text-align: center; } .songslist-header { height: 30px; border-bottom: 1px solid #dad8d8; line-height: 30px; background-color: #def; } .songslist-name { position: absolute; width: 40%; height: 100%; border-right: 1px solid #dad8d8; } .songslist-singer { position: absolute; left: 40%; width: 50%; height: 100%; border-right: 1px solid #dad8d8; } .songslist-option { position: absolute; left: 90%; width: 10%; height: 100%; } .songslist-main { background-color: #fff; height: 100%; } .songslist-main .songslist-name{ height: 50px; line-height: 50px; border: 0; } .songslist-main .songslist-singer{ height: 50px; line-height: 50px; border: 0; } .songslist-single { height: 50px; } </style> </head> <body> <div class="container"> <div class="songslist-op"> <label for="txtAddSName">歌曲名:</label><input type="text" id="txtAddSName" /> <label for="txtAddSinger">歌手:</label><input type="text" id="txtAddSinger" /> <button id="btnAdd">添加</button> <button id="btnRemove">删除</button> </div> <div class="songslist-header"> <div class="songslist-name">歌曲名称</div> <div class="songslist-singer">歌手</div> <div class="songslist-option">操作</div> </div> <div class="songslist-main" id="c"> <div class="songslist-single"> <div class="songslist-name">歌曲名称</div> <div class="songslist-singer">歌手</div> </div> <div class="songslist-single"> <div class="songslist-name">歌曲名称</div> <div class="songslist-singer">歌手</div> </div> <div class="songslist-single"> <div class="songslist-name">歌曲名称</div> <div class="songslist-singer">歌手</div> </div> <div class="songslist-single"> <div class="songslist-name">歌曲名称</div> <div class="songslist-singer">歌手</div> </div> </div> </div> <script type="text/javascript"> var SongsMagList=function(list){ this.SongsList=list||[]; this.render(); } SongsMagList.prototype={ add:function(songInfo){ this.SongsList.push(songInfo); this.render(); }, del:function(sName){ var SongsList=this.SongsList; for(var i=0;i<SongsList.length;i++){ if (SongsList[i].sName===sName) { SongsList.splice(i,1); break; }; } this.render(); }, update:function(sName,newName){ var SongsList=this.SongsList; for(var i=0;i<SongsList.length;i++){ if (SongsList[i].sName===sName) { SongsList[i].sSinger=newName; break; }; } this.render(); }, select:function(sName){ var SongsList=this.SongsList,msg=null; for(var i=0;i<SongsList.length;i++){ if (SongsList[i].sName===sName) { msg=SongsList[i].sSinger; break; }; } this.render(); console.log(msg||"没有查询到该歌曲的信息"); } } // 给原型对象添加一个 render方法 将数据渲染 封装了一个页面渲染的方法 SongsMagList.prototype.render=function(){ // 因为操作的都是 songslist中的数据 增删改查 也是使用songslist中的数据 var SongsList=this.SongsList; var htmlArr=[]; // 传入参数 SongsList.forEach(function(songInfo){ // songInfo 就是每一个歌曲信息对象 形参 htmlArr.push(‘<div class="songslist-single">‘); htmlArr.push(‘<div class="songslist-name">‘+songInfo.sName+‘</div>‘); htmlArr.push(‘<div class="songslist-singer">‘+songInfo.sSinger+‘</div>‘); htmlArr.push(‘</div>‘); }); document.querySelector(‘#c‘).innerHTML=htmlArr.join(""); } // var s1 = new SongsMagList([ // {sName: "痴心绝对", sSinger: "李圣杰"}, // { sName: "南山南", sSinger: "马頔"} // ]); // // 测试增删改查 // s1.add({sName: "最炫民族风", sSinger: "凤凰传奇"}); // // console.log(s1); // s1.render(); // console.log(s1); // s1.select("南山南"); // console.log(s1); // s1.del("南山南"); // console.log(s1); // s1.update("南山南","madi"); // console.log(s1); // // // var s1=new SongsMagList(); // 添加 新增歌曲事件 document.querySelector("#btnAdd").onclick=function(){ var name=document.querySelector("#txtAddSName").value; var singet=document.querySelector("#txtAddSinger").value; s1.add({sName: name, sSinger: singet}) } //添加 找到歌曲信息 删除对应的问题 document.querySelector("#btnRemove").onclick=function(){ var name=document.querySelector("#txtAddSName").value; s1.del(name); } </script> </body> </html>
弱弱的小白记录之——面向对象实现简单的歌曲管理信息
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。