使用原生JS实现火锅点餐小程序（面向对象思想）
本次小程序采用ES6开发标准，不会的宝宝们请先学习，再来观看吧！
使用条件：使用ES6标准开发；因为采用了Bootstrap在线，所以需要联网；VSCode开发工具，在本地服务器中打开。
代码展示：
Demo.html（网页），Demo.css（样式），Test01.js（菜单类），Test02.js（循环菜单），Test03.js(增，删操作)
下面进行一一展示：
Demo.html（网页）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Demo.css" rel="external nofollow" >
<script type="text/javascript" src="Test03.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table id='table1' class="table table-bordered table-striped">
<tr>
<td>名称</td>
<td>价格</td>
<td>图片</td>
<td>操作</td>
</tr>
<tbody id = 'tbody'></tbody>
</table>
</div>
<div class="col-md-6">
<table id='table2' class="table table-bordered" style="background-color:burlywood;">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tbody id="tbody1"></tbody>
</table>
</div>
</div>
</div>
<script type="module">
import {db_foot} from './Test02.js';
let contents = [];
window.onload = function(){
for(const foots of db_foot()){
contents.push(`
<tr>
<td>${foots.name}</td>
<td>${foots.price}</td>
<td>${foots.pic}</td>
<td><button value="${foots.name}" money="${foots.price}" class="btn btn-sm btn-info" οnclick="sss(this)">加入菜单</button></td>
</tr>
`);
document.getElementById('tbody').innerHTML = contents.join("");
};
};
</script>
</body>
</html>
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<arr_tr.length ; i++){
var td = arr_tr[i].firstElementChild.innerHTML;
//重复点菜，修改数量和金钱
if(td == zhi){
flag = false;
//个数
var count = arr_tr[i].firstElementChild.nextElementSibling.nextElementSibling;
var sum = count.innerHTML = parseFloat(count.innerHTML) + 1;
//金钱数
var qian = arr_tr[i].firstElementChild.nextElementSibling.innerHTML = sum * num;
break;
}
}
if(flag){
let tbody1 = document.getElementById("tbody1");
var tr = document.createElement("tr");
//名称
var td1 = document.createElement("td");
td1.innerHTML = `${zhi}`;
//价钱
var td2 = document.createElement("td");
td2.innerHTML = `${num}`;
//数量
var td3 = document.createElement("td");
td3.innerHTML = `1`;
//操作
var td4 = document.createElement("td");
td4.innerHTML = `<button class="btn btn-sm btn-warning" οnclick='shanchu(this)'>删除</button>`;
//插入
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实现火锅点餐小程序（面向对象思想），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
微信小程序 JS动态修改样式的实现方法
前言 本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <
-
微信小程序实现通过js操作wxml的wxss属性示例
本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性
-
微信小程序通过api接口将json数据展现到小程序示例
实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',
-
微信小程序 WXML、WXSS 和JS介绍及详解
前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla
-
微信小程序使用第三方库Immutable.js实例详解
前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f
-
微信小程序引用公共js里的方法的实例详解
微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
-
微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="
-
使用原生JS实现火锅点餐小程序（面向对象思想）
本次小程序采用ES6开发标准,不会的宝宝们请先学习,再来观看吧! 使用条件:使用ES6标准开发:因为采用了Bootstrap在线,所以需要联网:VSCode开发工具,在本地服务器中打开. 代码展示: Demo.html(网页),Demo.css(样式),Test01.js(菜单类),Test02.js(循环菜单),Test03.js(增,删操作) 下面进行一一展示: Demo.html(网页): <!DOCTYPE html> <html lang="en">
-
原生js实现随机点餐效果
html: <div class="wrap"> <div id="box"> </div> <button id="start">开始</button> <button id="stop">停止</button> css: .wrap{ width: 500px; height: 400px; margin: 0 auto; text-ali
-
原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
原生js实现的金山打字小游戏（实例代码详解）
首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g
-
利用原生JS实现欢乐水果机小游戏
简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单
-
Java点餐小程序之黑心商人
很久以前,有一个女人,开了一家酒店,她的名字叫孙二娘.下面是她找人做的点餐小程序.代码如下: import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.Entry; import java.util.ArrayList; import java.util.Scanner; import java.util.Set; public class MyDianCai { sta
-
JS模拟超市简易收银台小程序代码解析
废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> // 1.编写一个程序,计算增加后的工资.要求基本工资大于等于1000元,增加20%的工资;若小于1000元且大于等于800元,则增加15%,若小于800元,则增加10%工资. var basepay = parseInt(prompt("请输入您的工资:"));//初始工资 var pay1 = basepay+(basepay*0.2
-
java和js实现的洗牌小程序
这几天刚学了java和javascript,简单写了个用java和javascript的小程序 JavaScript的 // An highlighted block var colors = ['红桃','梅花','方片','黑桃'] var numbers = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'] var puke = new Array(); var cards = new Array(); for (var i =
-
node.js中PC端微信小程序包解密的处理思路
目录 小程序的源码在哪里 PC端小程序是怎么被加密的 解密思路 预处理 加密后的头部部分 加密后的尾部部分 再漂亮点 commander chalk 源代码 原来发布在掘金,搬过来好了. 微信小程序在PC端是加密存储的,如果直接打开是看不到什么有用的信息的,需要经过解密才可以看到包内具体的内容.本文使用nodejs实现解密算法,主要涉及到crypto, commander, chalk三个包的使用. 小程序的源码在哪里 PC端打开过的小程序会被缓存到本地微信文件的默认保存位置,可以通过微信PC端
-
SpringBoot带你实现一个点餐小程序
目录 一,功能介绍 二,开发语言介绍 三,系统的界面介绍 四,核心代码演示 一,功能介绍 本点单系统主要是基于SpringBoot框架和小程序开发的,主要是为当代人们的生活提供更便利.更高效的服务,也为营销者提供更好的系统进行用户.商品.订单等信息管理. 该系统所实现的主要功能模块如下: 前台: 1)注册登录 2)个人中心 ① 修改个人信息 ② 修改收货地址 ③ 积分 3)商品浏览 4)商品搜索 5)购物车 6)下单支付后台: 1)注册登录 2)个人中心 ① 修改个人信息 ② 修改密码 3)用户