本次小程序采用ES6开发标准,不会的宝宝们请先学习,再来观看吧!
使用条件:使用ES6标准开发;因为采用了Bootstrap在线,所以需要联网;VSCode开发工具,在本地服务器中打开。
代码展示:
Demo.html(网页),Demo.css(样式),Test01.js(菜单类),Test02.js(循环菜单),Test03.js(增,删操作)
下面进行一一展示:
Demo.html(网页):
document
名称 | 价格 | 图片 | 操作 |
名称 | 价格 | 数量 | 操作 |
Demo.css(样式):
*{margin: 0;padding: 0;} tr,td{ text-align:center; line-height: 20px; } td{ vertical-align: middle; }
Test01.js(菜单类):
export default class Person{ constructor(name,price,pic){ this.name = name; this.price = price; this.pic = pic; } }
Test02.js(循环菜单):
import Person from './Test01.js'; export function db_foot(){ let foots = new Array(); foots.push(new Person('鱼香肉丝',100,'')); foots.push(new Person('宫保鸡丁',200,'')); foots.push(new Person('菠萝吹雪',300,'')); return foots; }
Test03.js(增,删操作):
let contents = []; function sss(e){ var flag = true; var zhi = e.getAttribute("value"); var num = e.getAttribute("money"); var arr_tr =document.getElementById("table2").getElementsByTagName("tr"); let i; for(i=0 ; i删除`; //插入 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tbody1.appendChild(tr); } } //删除 function shanchu(obj){ obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); }
总结
以上所述是小编给大家介绍的使用原生JS实现火锅点餐小程序(面向对象思想),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对趣学号网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!