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

admin管理员组

文章数量:1130349

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

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

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

代码展示：

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

下面进行一一展示：

Demo.html(网页)：

Document

名称

价格

图片

操作

名称

价格

数量

操作

import {db_foot} from './Test02.js';

let contents = [];

window.onload = function(){

for(const foots of db_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(菜单类)：

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;

}

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

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

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

代码展示：

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

下面进行一一展示：

Demo.html(网页)：

Document

名称

价格

图片

操作

名称

价格

数量

操作

import {db_foot} from './Test02.js';

let contents = [];

window.onload = function(){

for(const foots of db_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(菜单类)：

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;

}

本文标签： html火锅页面使用原生JS实现火锅点餐小程序（面向对象思想）