微客导航 » 文章资讯 » 使用原生JS实现火锅点餐小程序（面向对象思想）

使用原生JS实现火锅点餐小程序（面向对象思想）

2023-08-04 18:21:04 168

本次小程序采用ES6开发标准，不会的宝宝们请先学习，再来观看吧！

使用条件：使用ES6标准开发；因为采用了Bootstrap在线，所以需要联网；VSCode开发工具，在本地服务器中打开。

代码展示：

Demo.html（网页），Demo.css（样式），Test01.js（菜单类），Test02.js（循环菜单），Test03.js(增，删操作)

下面进行一一展示：

Demo.html（网页）：







Document










名称
价格
图片
操作

名称价格数量操作

import{db_foot}from'./Test02.js'; letcontents=[]; window.onload=function(){ for(constfootsofdb_foot()){ contents.push(` ${foots.name} ${foots.price} ${foots.pic} 加入菜单 `); document.getElementById('tbody').innerHTML=contents.join(""); }; };

Demo.css（样式）：

*{margin:0;padding:0;}
tr,td{
text-align:center;
line-height:20px;
}
td{
vertical-align:middle;
}

Test01.js（菜单类）：

exportdefaultclassPerson{
constructor(name,price,pic){
this.name=name;
this.price=price;
this.pic=pic;
}
}

Test02.js（循环菜单）：

importPersonfrom'./Test01.js';

exportfunctiondb_foot(){
letfoots=newArray();
foots.push(newPerson('鱼香肉丝',100,''));
foots.push(newPerson('宫保鸡丁',200,''));
foots.push(newPerson('菠萝吹雪',300,''));
returnfoots;
}

Test03.js（增，删操作）：

letcontents=[];
functionsss(e){
varflag=true;
varzhi=e.getAttribute("value");
varnum=e.getAttribute("money");
vararr_tr=document.getElementById("table2").getElementsByTagName("tr");
leti;
for(i=0;i删除`;
//插入
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tbody1.appendChild(tr);
}
}
//删除
functionshanchu(obj){
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}

总结

以上所述是小编给大家介绍的使用原生JS实现火锅点餐小程序（面向对象思想），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

使用原生JS实现火锅点餐小程序（面向对象思想）

热门推荐

随机推荐