文章目录
- 概述
- 页面代码
- 截图
- 代码链接
概述
仿饿了么页面
技术html+css+js，同时还引入了vue.js框架。
页面代码
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>饿美了网</title><link href="css/public.css" rel="stylesheet" type="text/css" /><link href="css/index.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/script.js"></script>
</head><body><!-----头部开始-------><div class="top"><a href="./index.html"><img style="float:left;width: 1000px;height: 200px;" src="images/logo.png" /></a></div><a href="html/login.html"><button class="button01">登录/注册</button></a><!---nav开始----><div class="daohang"><div id="nav"><ul><li><a href="./index.html">首页</a></li><li><a href="./html/order.html">订单</a></li><li><a href="html/recommend.html">附近推荐</a></li><li class="downorder"><a class="order" href="html/Fruits.html">水果</a><div class="downtext"><a href="">草莓</a><a href="">菠萝</a><a href="">西瓜</a><a href="">枇杷</a></div></li><!-- <li><a href="html/Vegetables.html">蔬菜</a></li> --><li><a href="html/userInfo.html">个人信息</a></li><li><a href="html/Appraise.html">评价中心</a></li></ul></div></div><!---nav结束----><!-----banner-------><!-- <div class="ban"><img src="images/e118e3cdfe9c0a14-104a6139c30f339c-5516030145adc0d475c100260a514287.jpg" width="1000" height="335" border="0"></div> --><div id="flash"><div id="prev"></div><div id="next"></div><ul id="play"><li style="display: block;"><img src="images/banner/1.jpg" alt="" /></li><li><img src="images/banner/2.jpg" alt="" /></li><li><img src="images/banner/3.jpg" alt="" /></li><li><img src="images/banner/4.jpg" alt="" /></li><li><img src="images/banner/5.jpg" alt="" /></li><li><img src="images/banner/6.jpg" alt="" /></li><li><img src="images/banner/7.jpg" alt="" /></li><li><img src="images/banner/8.jpg" alt="" /></li></ul><ul id="button"><li><div style="background: #A10000;"></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li></ul></div><!-----头部结束-------><!-----main开始-------><div class="main"><div class="box1"><div class="shang-left"><div class="gk-title"><a href="html/about.html"><h1>饿美了网站简介</h1></a></div><div class="gk"><img src="images/gktu.jpg" /><p>“饿美了”是一款本地生活平台，主营在线外卖、新零售、即时配送和餐饮供应链等业务。本网站以“Everything30min”为使命，致力于用科技打造本地生活服务平台，推动了中国餐饮行业的数字化进程，将外卖培养成中国人继做饭、堂食后的第三种常规就餐方式。</p></div></div><div class="xz"><a href="html/techan.html"><h1><span><i> 更多>></i></span></h1></a><a href="html/tc01.html"><img src="images/31244462056d77bc135a6ab39713ef1b.jpeg" /></a><a href="html/tc02.html"><img src="images/5970143c6f75b999b188a26bc6d6379c.png" /></a><a href="html/tc03.html"><img src="images/625fbc2de66219951b384144cfae4980.jpeg" /></a><a href="html/tc04.html"><img src="images/65a7ea85c53648c7baee7fba7e3e2075.jpeg" /></a></div><div class="shang-right"><div class="count-title"><a href="html/minsu.html"><h1>基础功能</h1></a></div><div class="count"><br /><p>快速搜罗附近外卖，不用打电话直接预订：足不出户，即可享用一座城的美食。不想早起还想吃早饭，交给外卖小哥，支持预定早餐。</p><p> 看到大家对喜欢的外卖美食的点评&照片：支持点赞和分享美食图片，朋友圈式简易操作，让你成为美食方面的社交达人<p> 各种赠饮打折活动，优惠不断：每日各种优惠不间断，从水果到时蔬，从大餐到小吃，只有你吃不了，没有减免不。</div></div></div><div class="meishi"><div class="yy-title"><a href="html/jingdian.html"><h1>饿美了热门推荐</h1></a></div><div class="ms"><ul><li><img src="images/zhaji.jpg" /><p>炸鸡</p></li><li><img src="images/xiawei.jpg" /><p>虾尾</p></li><li><img src="images/paigu.jpg" /><p>排骨</p></li><li><img src="images/suancaiyu.jpg" /><p>酸菜鱼</p></li><li><img src="images/niupai.jpg" /><p>牛排</p></li></ul></div></div><!-----main结束-------><!-----bottom开始-------><div class="bottom"><div class="bottom-box"><p>2024@ 版权所有 </p></div></div><!-----bottom结束------->
</body></html>购物车JS代码
// JavaScript Document
window.onload = function demo() {//找到全选框oCheckBoxAll = document.getElementById("checkAll");//找到全选框oCheck = document.getElementsByClassName("checkCss");//定义总共数量以及总金额var totalCount = 0;var totalMoney = 0;//找到显示数量和金额的元素var priceTotal = document.getElementById("priceTotal");var countTotal = document.getElementById("countTotal");//找到数量输入框的值var oInputCount = document.getElementsByClassName("inputCountCss");//获取表格元素的值var otab = document.getElementById("gwcTable");var otr = document.getElementsByTagName("tr");//加减按钮元素var oBtn_jian = document.getElementsByClassName("reduceCss");var oBtn_jia = document.getElementsByClassName("addCss");//删除var oDel = document.getElementsByClassName("a");//获取结算按钮idvar orderBtn = document.getElementById("btnOrder");//判断全选按钮是否勾选var flag = 0;//单击全选按钮函数function Fcheck() {if (oCheckBoxAll.checked == true) {for (i = 0; i < oCheck.length; i++) {if (!oCheck[i].checked) { //判断单选框是否已经选中,不然价格和数量会重复加oCheck[i].checked = true;flag += 1;totalCount += parseInt(oInputCount[i].value);totalMoney += parseInt(otr[i + 1].cells[4].innerText);}}} else {for (i = 0; i < oCheck.length; i++) {oCheck[i].checked = false;flag = 0;}totalCount = 0;totalMoney = 0;}Spantotal();}//显示总金额和总件数函数function Spantotal() {countTotal.innerHTML = totalCount;priceTotal.innerHTML = totalMoney;}//单选按钮函数function check() {for (i = 0; i < oCheck.length; i++) {if (this == oCheck[i]) {index = i;break;}}if (oCheck[index].checked) {totalCount += parseInt(oInputCount[index].value);totalMoney += parseInt(oInputCount[index].value) * parseInt(otr[index + 1].cells[2].innerText);flag += 1;} else {totalCount -= parseInt(oInputCount[index].value);totalMoney -= parseInt(oInputCount[index].value) * parseInt(otr[index + 1].cells[2].innerText);flag -= 1;}if (flag == oCheck.length) {oCheckBoxAll.checked = true;} else {oCheckBoxAll.checked = false;}Spantotal();}//删除函数function shanChu() {for (i = 0; i < oDel.length; i++) {if (this == oDel[i]) {index = i;break;}}if (oCheck[index].checked == true) { //点了删除按钮,则总金额和总数量减去该商品的数量和金额totalCount -= parseInt(oInputCount[index].value);totalMoney -= parseInt(otr[index + 1].cells[4].innerText);}Spantotal();demo();otr[index + 1].remove();}//减按钮功能函数function jian() {for (i = 0; i < oBtn_jian.length; i++) {if (this == oBtn_jian[i]) {index = i;break;}}if (oInputCount[index].value != 0) {oInputCount[index].value = oInputCount[index].value - 1;otr[index + 1].cells[4].innerText = parseInt(oInputCount[index].value) * parseInt(otr[index + 1].cells[2].innerText);if (oCheck[index].checked && oInputCount[index].value != 0) {totalCount -= 1;totalMoney -= parseInt(otr[index + 1].cells[2].innerText);Spantotal();}}}//加按钮功能函数function jia() {for (i = 0; i < oBtn_jian.length; i++) {if (this == oBtn_jia[i]) {index = i;break;}}oInputCount[index].value = +(oInputCount[index].value) + 1;otr[index + 1].cells[4].innerText = parseInt(oInputCount[index].value) * parseInt(otr[index + 1].cells[2].innerText);if (oCheck[index].checked) {totalCount += 1;totalMoney += parseInt(otr[index + 1].cells[2].innerText);Spantotal();}}function jiesuan() {if (flag != 0) {window.location.href = "success.html";} else {alert("请至少选择一件商品结算");}}oCheckBoxAll.onclick = Fcheck; //调用全选函数for (i = 0; i < oCheck.length; i++)oCheck.item(i).onclick = check; //调用单选函数for (i = 0; i < oDel.length; i++)oDel.item(i).onclick = shanChu; //调用删除函数for (i = 0; i < oBtn_jian.length; i++) //调用减oBtn_jian.item(i).onclick = jian;for (i = 0; i < oBtn_jia.length; i++) //调用加oBtn_jia.item(i).onclick = jia;orderBtn.onclick = jiesuan; //调用结算函数
}
截图
页面：
实现订单
代码链接
链接: https://pan.baidu.com/s/1c-7nDlgn_I5AektDwkVaHg?pwd=cuii 提取码: cuii
–来自百度网盘超级会员v3的分享
