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

美团外卖系统说明

首页面

图片说明

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

图片说明

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

图片说明

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

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

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

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

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

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

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

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

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

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

-2

2个回答

1
MihoTifa
MihoTifa 回复devmiao: 已采纳,谢谢
17 天之前 回复
devmiao
devmiao 回复MihoTifa: 不用谢,问题解决请采纳吧
29 天之前 回复
MihoTifa
MihoTifa 这个之前就看过,需求不太一样,还是谢谢了。
29 天之前 回复

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

1
MihoTifa
MihoTifa 现在早就已经写完了,当时有点没思路所以希望能有些参考,不过现在早就已经写完这个了。。。
17 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的。是时候展现真正的技术了!
其他相关推荐
html+css+js制作美团官网
该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改。希望该项目对大家有帮助,下载了的朋友顺便给个好评呗~~
html+css选择全国城市 类似美团外卖
html+css选择全国城市 类似美团外卖
jQuery仿美团外卖订餐购物车代码
jQuery仿美团外卖订餐购物车代码 jQuery仿美团外卖订餐购物车代码
仿美团饿了点餐页面框架
仿照美团饿了么点餐界面编写的框架,html+css+jq的简单代码
Jquery仿美团外卖等食品选择页面购物车数量加减功能实现
先上图: HTML部分:  营养套餐 酒水饮料 酒水饮料 酒水饮料 商务套餐
电商类-仿美团页面demo
最近学的东西比较杂了点,就想说再好好练练基础的一些东西,于是就写了个美团页面的静态demo,里面主要还是用到了html+css+原生js+dom。重点还是在于页面的布局,我没有将网站的全部页面写出来,只是写了几个重要的布局,里面图片是截的网站上的,因为没有psd文件所以不能切图,所以肯定不很精确,不过我重点是在于网站的布局方面,所以小细节忽略还是有些小粗糙。下面的图就是我仿的界面: 此外除了静态页
jquery+jquery.mobile实现模仿美团外卖菜单栏的左右联动
jquery+jquery.mobile实现模仿美团外卖菜单栏的左右联动,项目中需要,又没有找到参考,就自己写了一个。
仿美团首页html模板
仿美团首页html模板仿美团首页html模板仿美团首页html模板
仿美团外卖效果
下面ListView向上滚动时,先让上面的图片往上滚动,直到图片看不到时再让下面的ListView向上滚动。 当向下滑动时,先让ListView往下滑动,直到ListView不能往下滑动时在让上面图片往下滚动。             实现效果如下:          布局示意图   布局代码 <RelativeLayout xmlns:android="
仿百度外卖、美团外卖、淘点点等左右联动ListView菜单展示
最近做项目时想把店铺内菜单展示做成百度外卖、美团外卖和淘点点的样子,网上没找到完美的Demo,所以只能自己瞎搞了;从Libraries for developers上找了个PinnedHeaderListView作为菜单展示页(即右半部分),左边店内分类用普通ListView就行(左半部分),主要方法就两个: 1. 左边ListView的setOnItemClickListener,点击左边
仿美团饿了么选菜界面实现
本文是在未来大神zxt头像狂魔的基础上稍作修改,大家在看这个博客之前可以出门右拐至这里: 传送门-----> 点击打开链接 好了,我们首先看一下两个app的界面长什么样子: 我们看到两个界面都很相似,如果你已经读完了我推荐的博客内容,接下来会非常的简单,首先我们还是无脑的自定义viewgroup,这个界面我打算用两个recyclerview完成,因为是左右布局,我们直接继承Li
简单的美团-web前端页面
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;我的美团&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;css/layui.css&quot; media=&quot;al
要求用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代码的灵活性
仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
仿美团,饿了吗两个ListView联动,左边点击切换右边,右边滑动切换左边
仿美团模板H5界面
有想学习H5的小伙伴可以来下载哦,高仿美团界面
仿饿了么美团点餐界面,listView的二级联动
项目需求,需要在项目里加入点餐的功能,自己简单写了一个, 先看图,界面丑勿喷: 只是做了简单的效果,实现点击左边右边改变,滑动右边左边改变,代码量很少,可以参考下 这是项目目录: 布局文件 左边listView 适配器 public class LeftAdapter extends BaseAdapter{ private List data
仿美团外卖菜单界面的实现
仿美团外卖菜单界面的实现布局文件总布局<?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
仿美团外卖商家点菜效果
仿美团外卖商家点菜效果,能充分学习菜单的功能。
安卓仿饿了么、美团外卖、百度外卖下单界面,头布局可收缩
最近在看一些外卖App的时候,觉得商家下单界面效果还挺不错的,想着了解一下这种功能是怎么实现的。第一想到的就是度娘,不过在百度这个功能的时候好像度娘不够给力,应该是我的搜索方式不对。几经搜寻,找到了一些资料,希望可以帮到正在搜寻这个功能的学习者:仿饿了么下单界面开源项目: https://github.com/dalong982242260/ElmBusiness博客地址: http://blo
用html+css+js做一个类似于美团网站包含视频
对于前端人员来说,最核心的技术就是html+css+js,以及会ajax。学会了这些基本技能,起码的网页结构以及交互功能是没问题的。视频教程主要以前端三剑客html,css,js 为主,讲解美团网的前端结构,请大家看下面的图片案例: 原文链接https://www.denglu.net/html_css_js/  含视频下载地址...
iOS仿美团外卖饿了吗App点餐动画
前言: 在这篇文章中你可以学到什么? Masonry布局, Block 以及动画, 俗称的懒加载. (想了解的看一看). 0.- tableViewCell布局篇–为方便大家查看, 我会尽量贴出全部代码/**< typedef block >*/ typedef void(^btnPulsBlock)(NSInteger count, BOOL animated); @interface XTFoo
jquery插件实现的类似美团app加入购物车效果
jquery插件实现的类似美团,天猫加入购物车效果,空中抛物线掉到购物车中效果。
HTML5+CSS手机微信订餐购物车结算模板
手机微信订餐购物车结算模板
高仿美团主界面<一>
声明:本demo还未完善,正在持续更新中。。。 先上图吧: 这个小demo资源图片全是用青花瓷抠出来的,现在只是完成了 一部分。会持续更行中。。。有兴趣的朋友可以关注我,我们一起coding,一起分享。然后这个demo很简单。但是有一些小细节可以和大家分享。相信用过美团的同鞋都知道,美团的主界面。效果动画图如下: git图 很明显美团的主界面是一个tableView 如上图的scrollVi
html5加js超简短代码写出饿了么LBS移动地图点餐系统
知识点:html/css,标签运用、样式讲解、静态开发布局、行业标准。JS基础、if判断、jq方法 Dom操作、逻辑思维。
仿美团滑动页实现
仿美团滑动页实现,有问题欢迎交流!
微信小程序实现仿美团外卖饿了么左右联动页面
话不多说,先上图注:要实现全部效果,需要引入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-...
仿美团外卖源码加自己做了个模拟数据加载的效果
入门了微信小程序之后,跟着视频做了个入门的“天气预报”简易版小程序,自己做了一个仿“豆瓣电影”的小程序,之前博文都写了,又在网上搜到一份“美团外卖”小程序的源码,所以就马上动手跟着做了起来,使用了它给的素材资源,然后自己仿照着界面效果,自己写样式,除了小部分样式可能是参考源码的,其余是自己写的,感觉这样很能锻炼样式布局的能力,虽然css比较恶心。然后逻辑上的话基本是照着源码理解,先写“死”数据,后
仿美团登录注册页面
先看一下模拟的效果: 然后点击注册可以跳转到注册页面: 代码也很简单:<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
仿美团商品列表显示
仿美团商品列表显示 左边显示种类、右边显示种类中的详细 选中后加入购物车、可以清空购物车 直接上图看效果: 1,展示页面 2,选择商品后 两遍都有相应数量显示 3,你选择好后的商品也会在购物车中展示 OK    满足你要求的请拿走 源码下载地址:  点击打开链接 //---------end--
Android仿百度外卖APP首页状态/标题栏效果(沉浸式状态栏)
前言: 经常用百度外卖APP订外卖,看到首页导航栏,往下拉就显示背景透明,往上滑就显示红色背景,该觉很有意思,现在很多App使用这样的效果,专业名词叫沉浸式状态栏效果,决定学习一下。说到这里,一下就暴露了宅男的本质了,老是叫外卖,^o^。 概要: 本文采用的是在上下滑动过程中,改变状态栏位置布局的背景色,以达到预期的效果,涉及到不同API版本下对状态栏背景设置的问题,对相关知识不了解的请
模仿新版美团外卖导航栏自动改变透明度效果
现在很多iOS应用都使用了随着tableView滑动(contentOffSet改变), 导航栏都明度改变的效果,正好想试着做一下,就拿新版美团外卖当作例子吧。 过程十分简单,但效果很不错。
完美实现仿美团城市选择 定位功能
完美实现仿美团城市选择 定位功能 http://blog.csdn.net/dmk877/article/details/49757731 公司需求要实现一个完全仿美团的城市选择定位功能,小妹苦苦用了小2天实现了此需求。原因可能是因为还处于小白阶段,关于百度地图基础定位、数据库创建以及操作、数组存值等比较陌生,出现一个个诡异的错误后需要Google好久才解决。现在把相关问题记录以免大家踩坑:
关于美团选餐界面效果的实现思路
美团外卖有一个效果,实际感觉挺不错的,针对此效果,总结并实现了两个思路。页面布局情况:htmlcss &amp;lt;div id=&quot;left&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li id=&quot;left_0&quot;&amp;gt;分类一&amp;lt;/li&amp;gt; &amp;lt;li id=&quot;left_1&quot;&amp;gt;分类二&amp;lt;/li&amp;gt; &amp;lt;li id
模仿美团外卖小程序静态模板页面
纯前端模板页面,订餐外卖小程序模板,仿美团外卖。无后端接口,下载运行即可看到效果
仿美团商品列表展示购物车
仿美团商品列表显示 左边显示种类、右边显示种类中的详细 选中后加入购物车、可以清空购物车
ionic2开发的仿外卖点餐系统(Ionic2+Angular2
github上的项目源码Run this Project(运行该项目)first(首先):make sure your computer install ionic 确保你的电脑安装了ionic2,不懂自行百度second(其次):$ ionic start wechat_restaurant tutorial --v2third(然后):find local file: /wechat_rest...
仿美团外卖界面ListView滑动例子
这是一个eclipse下写的代码,较为简短,可自行移至AS下
仿美团首页功能选择的实现
一、效果 private String[] titles = {"美食", "电影", "酒店住宿", "休闲娱乐", "外卖", "自助餐", "KTV", "机票/火车票", "周边游", "美甲美睫", "火锅", "生日蛋糕", "甜品饮品", "水上乐园", "汽车服务", "美发", "丽人", "景点", "足疗按摩", "运动健身", "健身", "超市", "买菜",
属性动画 模拟美团外卖购物车曲线动画
效果图就是点击右上角的按钮,会有一个小圆点从该按钮位置曲线移动到左下角的按钮的位置 MainActivity.javapackage com.qunar.yuzhiyun.propertyanimation;import android.animation.ObjectAnimator; import android.graphics.Point; import android.support.v