要求用html+css+js做一个仿美团外卖的页面出来,可有大侠能帮助么?

美团外卖系统说明

首页面

图片说明

点击“加入购物车”时
(1)购物车中添加一条订单记录
(2)购物车中的订单数量增加1
(3)购买成功要有相应的提示

图片说明

点击“我的购物车”时,进入到购物车的页面
(1) 隐藏点餐的div,显示购物车的div

图片说明

点击“继续任性点餐”时,进入点餐页面
(1) 显示点餐的div,隐藏购物车的div
图片说明

点击“加入购物车”时,又可以继续点餐
图片说明

在购物车页面中,点击删除,可以随时删除点餐的订单
(1) 删除前,要有相应的提示(“确定删除吗?”)

图片说明
(2) 点击确定时,删除该订单,并提示是否删除成功
(3) 购物车中的订单数量减1
图片说明

点击“全选”时,全部选中
再点击“全选”时,全部不选中
图片说明

点击“删除选中”按钮时,
(1) 提示是否要删除所有选中的项
图片说明

(2) 当确定要删除时,购物车的订单数量减少,并提示删除成功
图片说明

点击“结算”时,结算选中的订单,提示付款金额
图片说明

结算完后
(1) 删除结算的订单记录
(2) 购物车中的订单数量减少
图片说明

要求:
代码要规范
建议不同的功能封装在不同的函数中
代码的灵活性

-2

2个回答

3
MihoTifa
MihoTifa 回复devmiao: 已采纳,谢谢
6 个月之前 回复
devmiao
见了你女王大人喵姐还不跪下 回复MihoTifa: 不用谢,问题解决请采纳吧
6 个月之前 回复
MihoTifa
MihoTifa 这个之前就看过,需求不太一样,还是谢谢了。
6 个月之前 回复

这位不是想让别人提供完整的项目源码吧?

1
weixin_44211075
〆 安若浮生_ 回复MihoTifa: 兄弟,咱俩作业一样,今天刚布置的,我也一脸懵逼,借我参考下呗,v。x1263998443,谢谢哥哥
5 个月之前 回复
MihoTifa
MihoTifa 现在早就已经写完了,当时有点没思路所以希望能有些参考,不过现在早就已经写完这个了。。。
6 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html+css+js制作美团官网
该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改。希望该项目对大家有帮助,下载了的朋友顺便给个好评呗~~
仿美团饿了点餐页面框架
仿照美团饿了么点餐界面编写的框架,html+css+jq的简单代码
用html+css+js做一个类似于美团网站包含视频
对于前端人员来说,最核心的技术就是html+css+js,以及会ajax。学会了这些基本技能,起码的网页结构以及交互功能是没问题的。视频教程主要以前端三剑客html,css,js 为主,讲解美团网的前端结构,请大家看下面的图片案例: 原文链接https://www.denglu.net/html_css_js/  含视频下载地址...
html+css选择全国城市 类似美团外卖
html+css选择全国城市 类似美团外卖
关于美团选餐界面效果的实现思路
美团外卖有一个效果,实际感觉挺不错的,针对此效果,总结并实现了两个思路。页面布局情况:htmlcss <div id="left"> <ul> <li id="left_0">分类一</li> <li id="left_1">分类二</li> <li id
仿美团饿了么选菜界面实现
本文是在未来大神zxt头像狂魔的基础上稍作修改,大家在看这个博客之前可以出门右拐至这里: 传送门-----> 点击打开链接 好了,我们首先看一下两个app的界面长什么样子: 我们看到两个界面都很相似,如果你已经读完了我推荐的博客内容,接下来会非常的简单,首先我们还是无脑的自定义viewgroup,这个界面我打算用两个recyclerview完成,因为是左右布局,我们直接继承Li
jQuery仿美团外卖订餐购物车代码
jQuery仿美团外卖订餐购物车代码 jQuery仿美团外卖订餐购物车代码
Jquery仿美团外卖等食品选择页面购物车数量加减功能实现
先上图: HTML部分:  营养套餐 酒水饮料 酒水饮料 酒水饮料 商务套餐
ionic2开发的仿外卖点餐系统(Ionic2+Angular2...包含CSS3飞入购物车效果和各种组件用法)
Run this Project(运行该项目) first(首先): make sure your computer install ionic  确保你的电脑安装了ionic2,不懂自行百度 second(其次): $ ionic start wechat_restaurant tutorial --v2 third(然后): find local fi
电商类-仿美团页面demo
最近学的东西比较杂了点,就想说再好好练练基础的一些东西,于是就写了个美团页面的静态demo,里面主要还是用到了html+css+原生js+dom。重点还是在于页面的布局,我没有将网站的全部页面写出来,只是写了几个重要的布局,里面图片是截的网站上的,因为没有psd文件所以不能切图,所以肯定不很精确,不过我重点是在于网站的布局方面,所以小细节忽略还是有些小粗糙。下面的图就是我仿的界面: 此外除了静态页
jquery+jquery.mobile实现模仿美团外卖菜单栏的左右联动
jquery+jquery.mobile实现模仿美团外卖菜单栏的左右联动,项目中需要,又没有找到参考,就自己写了一个。
仿美团外卖菜单界面的实现
仿美团外卖菜单界面的实现布局文件总布局<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activi
仿美团外卖效果
下面ListView向上滚动时,先让上面的图片往上滚动,直到图片看不到时再让下面的ListView向上滚动。 当向下滑动时,先让ListView往下滑动,直到ListView不能往下滑动时在让上面图片往下滚动。             实现效果如下:          布局示意图   布局代码 <RelativeLayout xmlns:android="
仿美团外卖商家点菜效果
仿美团外卖商家点菜效果,能充分学习菜单的功能。
仿美团登录注册页面
先看一下模拟的效果: 然后点击注册可以跳转到注册页面: 代码也很简单:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
仿美团首页html模板
仿美团首页html模板仿美团首页html模板仿美团首页html模板
仿百度外卖、美团外卖、淘点点等左右联动ListView菜单展示
最近做项目时想把店铺内菜单展示做成百度外卖、美团外卖和淘点点的样子,网上没找到完美的Demo,所以只能自己瞎搞了;从Libraries for developers上找了个PinnedHeaderListView作为菜单展示页(即右半部分),左边店内分类用普通ListView就行(左半部分),主要方法就两个: 1. 左边ListView的setOnItemClickListener,点击左边
仿美团模板H5界面
有想学习H5的小伙伴可以来下载哦,高仿美团界面
html前端--外卖点餐模板
把项目搭建到Tomcat中的appwebs文件资源中可以直接运行!
仿“饿了么”订餐app界面实现
直想做简单的demo分享给大家。趁着最近项目收尾,时间充裕,便仿照“饿了么”订餐app做了个demo,虽然有些瑕疵和bug,但还是希望能给刚入门的新人和有需要的同学带来帮助吧。以后会不定期在demo里加些新内容,也想请有git账号的同学们star一下,3q! ===================有图有真相===========================================
HTML5+CSS手机微信订餐购物车结算模板
手机微信订餐购物车结算模板
要求用html+css+js做一个仿美团外卖的页面出来,可有大侠能帮助么?
美团外卖系统说明rnrn首页面rn rn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550623_466252.jpg)rnrn点击“加入购物车”时rn(1)购物车中添加一条订单记录rn(2)购物车中的订单数量增加1rn(3)购买成功要有相应的提示rnrn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550662_265119.jpg)rn rnrnrn点击“我的购物车”时,进入到购物车的页面rn(1) 隐藏点餐的div,显示购物车的divrn rn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550696_41329.jpg)rnrn点击“继续任性点餐”时,进入点餐页面rn(1) 显示点餐的div,隐藏购物车的divrn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550745_924786.jpg)rnrnrn点击“加入购物车”时,又可以继续点餐rn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550788_859957.jpg)rnrnrn在购物车页面中,点击删除,可以随时删除点餐的订单rn(1) 删除前,要有相应的提示(“确定删除吗?”)rn rn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550828_41572.jpg)rn(2) 点击确定时,删除该订单,并提示是否删除成功rn(3) 购物车中的订单数量减1rn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550864_239077.jpg)rnrn点击“全选”时,全部选中rn再点击“全选”时,全部不选中rn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550911_522324.jpg)rnrn点击“删除选中”按钮时,rn(1) 提示是否要删除所有选中的项rn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550945_320391.jpg)rnrn(2) 当确定要删除时,购物车的订单数量减少,并提示删除成功rn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542550990_134176.jpg)rnrnrn点击“结算”时,结算选中的订单,提示付款金额rn![图片说明](https://img-ask.csdn.net/upload/201811/18/1542551022_602856.jpg)rnrn结算完后rn(1) 删除结算的订单记录rn(2) 购物车中的订单数量减少rn ![图片说明](https://img-ask.csdn.net/upload/201811/18/1542551058_376038.jpg)rnrn要求:rn代码要规范rn建议不同的功能封装在不同的函数中rn代码的灵活性
仿美团菜单页面
美团
高仿美团主界面<一>
声明:本demo还未完善,正在持续更新中。。。 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,现在只是完成了 一部分。会持续更行中。。。有兴趣的朋友可以关注我,我们一起coding,一起分享。然后这个demo很简单。但是有一些小细节可以和大家分享。相信用过美团的同鞋都知道,美团的主界面。效果动画图如下: git图 很明显美团的主界面是一个tableView 如上图的scrollVi
仿美团外卖源码加自己做了个模拟数据加载的效果
入门了微信小程序之后,跟着视频做了个入门的“天气预报”简易版小程序,自己做了一个仿“豆瓣电影”的小程序,之前博文都写了,又在网上搜到一份“美团外卖”小程序的源码,所以就马上动手跟着做了起来,使用了它给的素材资源,然后自己仿照着界面效果,自己写样式,除了小部分样式可能是参考源码的,其余是自己写的,感觉这样很能锻炼样式布局的能力,虽然css比较恶心。然后逻辑上的话基本是照着源码理解,先写“死”数据,后
vuejs仿美团,饿了么项目之——购物车篇
上一篇写了个商品加减的组件,这篇说一下购物车。只有当添加商品的时候,也就是存在count这个key的时候,购物车的样式才改变,计算属性总价格,总数量才实现。所以我们先在good.vue中判断下此时是否点击了添加商品事件,也就是判断是否有count; 我写的本地的json数据是类似这样的: { &quot;data&quot;: { &quot;food&quot;:[ ...
模仿新版美团外卖导航栏自动改变透明度效果
现在很多iOS应用都使用了随着tableView滑动(contentOffSet改变), 导航栏都明度改变的效果,正好想试着做一下,就拿新版美团外卖当作例子吧。 过程十分简单,但效果很不错。
iOS仿美团外卖饿了吗App点餐动画
前言: 在这篇文章中你可以学到什么? Masonry布局, Block 以及动画, 俗称的懒加载. (想了解的看一看). 0.- tableViewCell布局篇–为方便大家查看, 我会尽量贴出全部代码/**< typedef block >*/ typedef void(^btnPulsBlock)(NSInteger count, BOOL animated); @interface XTFoo
安卓仿饿了么、美团外卖、百度外卖下单界面,头布局可收缩
最近在看一些外卖App的时候,觉得商家下单界面效果还挺不错的,想着了解一下这种功能是怎么实现的。第一想到的就是度娘,不过在百度这个功能的时候好像度娘不够给力,应该是我的搜索方式不对。几经搜寻,找到了一些资料,希望可以帮到正在搜寻这个功能的学习者:仿饿了么下单界面开源项目: https://github.com/dalong982242260/ElmBusiness博客地址: http://blo
vuejs仿美团,饿了么项目之——购物车列表篇
上篇把购物车的一些功能实现了,这篇写一下有关购物车列表的主要功能。 通过上篇我们知道。遍历JSON数据如果有count值,说明执行了添加事件,那么将这些商品数据传入一个数组foodlist,并通过props传给购物车组件。那么购物车列表的内容就是v-for传入的这个foodlist即可。 购物车列表的大概样式就是隐藏的。当有商品添加,点击底部购物车图标就显...
仿美团首页功能选择的实现
一、效果 private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "外卖", "自助餐", "KTV", "机票/火车票", "周边游", "美甲美睫", "火锅", "生日蛋糕", "甜品饮品", "水上乐园", "汽车服务", "美发", "丽人", "景点", "足疗按摩", "运动健身", "健身", "超市", "买菜",
仿美团滑动页实现
仿美团滑动页实现,有问题欢迎交流!
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边 先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示出来,再如果这个条目的类型和上一个条目的类型不一样,就让这个条目的标题显示出来,否则
仿饿了么美团点餐界面,listView的二级联动
项目需求,需要在项目里加入点餐的功能,自己简单写了一个, 先看图,界面丑勿喷: 只是做了简单的效果,实现点击左边右边改变,滑动右边左边改变,代码量很少,可以参考下 这是项目目录: 布局文件 左边listView 适配器 public class LeftAdapter extends BaseAdapter{ private List data
仿 美团/饿了吗 搜索框点击效果
就是如下这种总效果: 点击搜索框(上图)- 出现带热门搜索、历史搜索的页(下图)   解决: 1.搜索框input加 @focus=&quot;this.$router.push('/search')&quot; 路由跳转新页面 2.新页面钩子函数 created() {       $('#input').focus() } 无效!!!好吧! 3.亲测有效 created() {  ...
使用vue 实现外卖平台,饿了么美团模仿
可以搜索,可以添加到购物车,可以计算价格  目录结构: components(folder)         meituan.vue         store(folder)                action.js                mulation.js                action.js                index.js ...
Android项目源码简单仿美团UI项目源码
本项目是一个基于安卓的仿美团安卓客户端UI项目的源码,实现仿照的页面有无密码快捷登陆、个人中心页面、发现页面、app首页、团购页面、商家列表页面等,但是毕竟遗憾的是很多页面效果没有实现
微信小程序实现仿美团外卖饿了么左右联动页面
话不多说,先上图注:要实现全部效果,需要引入zan-ui的框架,如果不会引入的话,可以参考我的这篇文章微信小程序之第三方UI框架 zanui 使用教程wxml&amp;lt;view class=&quot;goods&quot; wx:if=&quot;{{status==0||item.status==status}}&quot;&amp;gt; &amp;lt;view class=&quot;menu-wrapper&quot;&amp;gt; &amp;lt;scroll-...
属性动画 模拟美团外卖购物车曲线动画
效果图就是点击右上角的按钮,会有一个小圆点从该按钮位置曲线移动到左下角的按钮的位置 MainActivity.javapackage com.qunar.yuzhiyun.propertyanimation;import android.animation.ObjectAnimator; import android.graphics.Point; import android.support.v
仿外卖购物车的实现
仿饿了么购物车的简单实现 下载到的文件是个AS module,你可以在自己新建的工程中Import Module. 博客地址:http://blog.csdn.net/w804518214/article/details/51570975
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 产品经理能培训出来吗 大数据培训出来的能就业吗