网站改版 数据迁移,泸州市住房和城乡建设局网站,高端网约车,简述站点推广有哪些方式是根据渡一袁老师的大师课写的#xff0c;如有什么地方存在问题#xff0c;还请大家指出来哟ど⁰̷̴͈꒨⁰̷̴͈う♡#xff5e;
index.html !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-e…是根据渡一袁老师的大师课写的如有什么地方存在问题还请大家指出来哟ど⁰̷̴͈꒨⁰̷̴͈う♡
index.html !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title亚亚外卖/titlelink relshortcut icon href./assets/favicon.ico typeimage/x-icon /link relstylesheet href./css/common.css /link relstylesheet href./css/container.css /link relstylesheet href./css/footer.css /link relstylesheet href./css/add-to-car.css //headbodydiv classcontainerdiv classmenudiv classmenu-item activespan推荐/span/divdiv classmenu-itemspan热销/span/divdiv classmenu-itemspan折扣/span/divdiv classmenu-itemspan夏日冰咖必喝榜/span/divdiv classmenu-itemspan进店必喝/span/divdiv classmenu-itemspan只喝美式/span/divdiv classmenu-itemspan酷爽特调水果冰萃/span/divdiv classmenu-itemspan经典奶咖/span/divdiv classmenu-itemspan创意奶咖/span/divdiv classmenu-itemspan瑞纳冰季/span/divdiv classmenu-itemspan不喝咖啡/span/divdiv classmenu-itemspan轻食甜品/span/divdiv classmenu-itemspan热卖套餐/span/div/divdiv classgoods-list/div/divdiv classfooterdiv classfooter-car-containerdiv classfooter-cari classiconfont i-gouwuchefill/ispan classfooter-car-badge0/span/divdiv classfooter-car-pricespan classfooter-car-unit/spanspan classfooter-car-total0.00/span/divdiv classfooter-car-tip配送费0/div/divdiv classfooter-paya href去结算/aspan还差0元起送/span/div/div!-- div classadd-to-cari classiconfont i-jiajianzujianjiahao/i/div --script src./js/data.js/scriptscript src./js/index.js/script/body
/htmlcommon.css
import url(https://at.alicdn.com/t/c/font_3555577_me2a6tdmvu8.css);*,
*::before,
*::after {margin: 0;padding: 0;box-sizing: border-box;
}html {font-size: 0.125vw;
}
body {font-size: 35rem;-webkit-tap-highlight-color: transparent;-webkit-font-smoothing: antialiased;user-select: none;font-family: Microsoft Yahei, sans-serif;
}
a {color: inherit;text-decoration: none;
}
.iconfont {font-size: inherit;
}container.css
.container {position: fixed;left: 0;top: 0;width: 100%;height: calc(100% - 100rem);display: flex;color: #333;
}
.menu {background: #f5f5f5;width: 190rem;overflow-y: scroll;padding-bottom: 50rem;flex: 0 0 auto;
}
.menu::-webkit-scrollbar {width: 0;
}.menu-item {height: 141rem;display: flex;justify-content: center;align-items: center;padding: 0 30rem;position: relative;
}
.menu-item span {font-size: 30rem;line-height: 40rem;max-height: 80rem;overflow: hidden;
}
.menu-item.active {font-weight: bold;background: #fff;
}
.menu-item.active::before {content: ;position: absolute;left: 0;height: 100%;width: 7.5rem;background: #3190e8;
}.goods-list {flex-grow: 1;overflow-y: scroll;
}
.goods-list::-webkit-scrollbar {width: 0;
}.goods-item {border-bottom: 1rem solid #f8f8f8;padding: 30rem 20rem;display: flex;
}
.goods-pic {width: 200rem;height: 200rem;object-fit: contain;border: 1rem solid rgba(0, 0, 0, 0.06);flex: 0 0 auto;
}
.goods-info {flex: 1 1 auto;padding: 0 35rem;overflow: hidden;
}
.goods-title {font-size: 35rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 20rem;
}
.goods-desc {font-size: 24rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 20rem;
}
.goods-sell {color: #858687;font-size: 24rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 20rem;display: flex;
}
.goods-sell span:first-child {margin-right: 18rem;
}
.goods-confirm {display: flex;justify-content: space-between;
}
.goods-price {display: flex;font-size: 35rem;font-weight: bold;color: #f60;align-items: flex-end;
}
.goods-price-unit {font-size: 25rem;margin-bottom: 4rem;font-weight: normal;
}
.goods-btns {display: flex;justify-content: center;align-items: center;
}
.goods-btns .iconfont {width: 40rem;height: 40rem;background: #4a90e1;color: #fff;border-radius: 50%;font-size: 23rem;line-height: 40rem;text-align: center;
}
.goods-btns span {margin: 0 15rem;display: none;
}
.goods-btns .i-jianhao {border: 1rem solid #4a90e1;background: #fff;color: #4a90e1;font-weight: bold;display: none;
}
.goods-item.active span {display: block;
}
.goods-item.active .i-jianhao {display: block;
}footer.css
.footer {height: 100rem;color: #fff;position: fixed;left: 0;bottom: 0;width: 100%;display: flex;z-index: 10;
}.footer-car-container {flex-grow: 1;background: #3d3d3f;padding-left: 175rem;position: relative;
}
.footer-car {position: absolute;width: 118rem;height: 118rem;border: 9rem solid #444;left: 25rem;top: -35rem;border-radius: 50%;background: inherit;display: flex;justify-content: center;align-items: center;font-size: 60rem;
}
.footer-car-badge {position: absolute;width: 35rem;height: 35rem;background: #ec5533;font-size: 25rem;text-align: center;border-radius: 50%;line-height: 35rem;right: 0;top: 0;display: none;
}
.footer-car.active {background: #4a90e1;
}
.footer-car.active .footer-car-badge {display: block;
}
.footer-car.animate {animation: footer-car-animate 500ms ease-in-out;
}keyframes footer-car-animate {0% {transform: scale(1);}25% {transform: scale(0.8);}50% {transform: scale(1.1);}75% {transform: scale(0.9);}100% {transform: scale(1);}
}.footer-car-price {font-size: 40rem;display: flex;margin-top: 5rem;
}
.footer-car-tip {font-size: 20rem;margin-left: 6rem;
}
.footer-pay {background: #535356;width: 250rem;font-size: 35rem;line-height: 100rem;text-align: center;
}
.footer-pay * {display: block;width: 100%;height: 100%;
}
.footer-pay a {display: none;
}
.footer-pay span {font-size: 30rem;
}
.footer-pay.active {background: #76d572;
}
.footer-pay.active a {display: block;
}
.footer-pay.active span {display: none;
}add-to-car.css
.add-to-car {position: fixed;color: #fff;font-size: 23rem;line-height: 40rem;text-align: center;z-index: 9;margin-left: -20rem;margin-top: -20rem;left: 0;top: 0;/* 匀速动画 */transition: 0.5s linear;
}.add-to-car .iconfont {width: 40rem;height: 40rem;background: #4a90e1;border-radius: 50%;display: block;/* i元素过渡动画i不应该设置匀速动画。cubic-bezier函数x1,y1,x2,y2分别代表起点和终点的坐标 */transition: 0.5s cubic-bezier(0.5, -0.5, 1, 1);
}data.js
var goods [{pic: ./assets/g1.png,title: 椰云拿铁,// desc是富文本desc: 1人份【年度重磅一口吞云】√原创椰云topping绵密轻盈到飞起原创瑞幸椰云™工艺使用椰浆代替常规奶盖打造丰盈、绵密如云朵般细腻奶沫体验椰香清甜饱满一口滑入口腔【饮用建议】请注意不要用吸管不要搅拌哦~,sellNumber: 200,//销量,月售favorRate: 95,//好评率price: 32,//价格},{pic: ./assets/g2.png,title: 生椰拿铁,desc: 1人份【YYDS无限回购】现萃香醇Espresso遇见优质冷榨生椰浆椰香浓郁香甜清爽带给你不一样的拿铁体验主要原料浓缩咖啡、冷冻椰浆、原味调味糖浆图片及包装仅供参考请以实物为准。建议送达后尽快饮用。到店饮用口感更佳。,sellNumber: 1000,favorRate: 100,price: 19.9,},{pic: ./assets/g3.png,title: 加浓 美式,desc: 1人份【清醒加倍比标美多一份Espresso】口感更佳香醇浓郁回味持久图片仅供参考请以实物为准。建议送达后尽快饮用。,sellNumber: 200,favorRate: 93,price: 20.3,},{pic: ./assets/g4.png,title: 瓦尔登蓝钻瑞纳冰,desc: 1人份【爆款回归蓝色治愈力量】灵感来自下澄明、碧蓝之境---瓦尔登湖。含藻蓝蛋白梦幻蓝色源自天然植物成分非人工合成色素融入人气冷榨生椰浆椰香浓郁清冽冰爽底部添加Q弹小料0脂原味晶球光泽剔透如钻石般blingbling。搭配奶油顶和彩虹色棉花糖满足你的少女心【去奶油小提示】由于去掉奶油后顶料口味会受影响为保证口感选择“去奶油”选项时将同时去掉奶油及顶料请注意哦【温馨提示】瑞纳冰系列产品形态为冰沙无法进行少冰、去冰操作请您谅解。【图片仅供参考请以实物为准】,sellNumber: 17,favorRate: 80,price: 38,},{pic: ./assets/g5.png,title: 椰云精萃美式,desc: 1人份【不用吸管 大口吞云】1杯热量*≈0.6个苹果原创瑞幸椰云™工艺将「椰浆」变成绵密、丰盈的“云朵”口感绵密顺滑0乳糖植物基清爽轻负担*数据引自《中国食物成分表》第六版苹果每100克可食部分中能量约为53千卡以每个苹果250克/个计1杯椰云精萃美式约80千卡相当于约0.6个苹果。【图片仅供参考请以实物为准】,sellNumber: 50,favorRate: 90,price: 21.12,},];
index.js
// 这里利用ES6中的类来实现单件商品的数据这种写法是一种面向对象编程的写法优势是可以将数据和方法进行封装
// 单件商品的数据
class UIGoods {// 构造函数constructor(g) {this.data g; // 初始化data属性为传入的参数gthis.choose 0; // 初始化choose属性为0// this.totalPrice0;// 初始化totalPrice属性为0但这样会导致每次计算总价都要重新计算造成数据冗余// 数据冗余的解决方法将totalPrice属性设置为私有属性通过getter方法来获取和设置值// 数据冗余的优缺点性能下降但可以减少代码量。且可以提高代码的可读性、可维护性}/*** 获取、计算总价* return {number} 总价*/getTotalPrice() {return this.data.price * this.choose;}// 是否选中了此件商品isChoose() {// 如果choose大于0则表示选中了此件商品return this.choose 0;}/* 选择的数量1这么写的好处是可以避免多次判断提高性能。而且可以提高代码的可读性、可维护性。如果想要在原有基础上增加数量可以直接调用increase方法*/increase() {this.choose;}// 选择的数量-1decrease() {// 如果选择的数量为0则表示没有选择此件商品不需要减if (this.choose 0) {return;}this.choose--;}
}// 整个界面的数据
class UIData {constructor() {// 数组var uiGoods [];// 遍历原始数据将原始数据转换为单件商品的数据for (var i 0; i goods.length; i) {var uig new UIGoods(goods[i]);uiGoods.push(uig);}// 将单件商品的数据保存到uiGoods属性中this.uiGoods uiGoods;// 起送标准 还差多少钱起送this.deliveryThreshold 30;// 起送标准 起送价格配送费用this.deliveryPrice 5;}
// 总价getTotalPrice() {var sum 0;// 遍历循环for (var i 0; i this.uiGoods.length; i) {var g this.uiGoods[i];sum g.getTotalPrice();}return sum;}// 增加某件商品的选中数量通过下标拿到对应的商品increase(index) {this.uiGoods[index].increase();}// 减少某件商品的选中数量decrease(index) {this.uiGoods[index].decrease();}// 得到总共的选择数量getTotalChooseNumber() {var sum 0;for (var i 0; i this.uiGoods.length; i) {sum this.uiGoods[i].choose;}return sum;}// 判断购物车中有没有东西hasGoodsInCar() {// 这里调用了getTotalChooseNumber如果数量大于0那就代表购物车中有东西return this.getTotalChooseNumber() 0;}// 是否跨过了起送标准isCrossDeliveryThreshold() {return this.getTotalPrice() this.deliveryThreshold;}// 判断是否选中了商品利用了商品的下标isChoose(index) {return this.uiGoods[index].isChoose();}
}// 整个界面
class UI {constructor() {// 商品数据,对商品进行封装不管是对商品进行增删改查还是对商品进行计算都可以统一封装到一个对象中this.uiData new UIData();// 是用来获取元素的因为我们是用js来操作dom所以需要用到dom元素。这doms里面包含了各种dom元素this.doms {// 获取商品列表容器goodsContainer: document.querySelector(.goods-list),// 获取配送费deliveryPrice: document.querySelector(.footer-car-tip),// 获取页脚footerPay: document.querySelector(.footer-pay),// 获取页脚内的spanfooterPayInnerSpan: document.querySelector(.footer-pay span),// 获取总价totalPrice: document.querySelector(.footer-car-total),// 获取购物车car: document.querySelector(.footer-car),// 获取购物车的角标badge: document.querySelector(.footer-car-badge),};// 获取购物车的位置var carRect this.doms.car.getBoundingClientRect();// 获取购物车的中心点var jumpTarget {x: carRect.left carRect.width / 2,y: carRect.top carRect.height / 5,};// 获取购物车的中心点this.jumpTarget jumpTarget;// 创建商品列表 是为了循环创建商品列表元素this.createHTML();// 更新页脚this.updateFooter();// 监听各种事件this.listenEvent();}// 监听各种事件listenEvent() {// 购物车动画this.doms.car.addEventListener(animationend, function () {this.classList.remove(animate);});}// 根据商品数据创建商品列表元素/*两种方式(这里用第一种方式)1.遍历商品数据将商品数据转换为html字符串 优点可以减少代码量、简单但性能下降、执行效率低。因为字符串得parse html得解析成dom元素且无法直接操作dom元素(总的来说就是执行效率低开发效率高)2.一个一个创建商品列表元素 优点性能高、执行效率高但代码量多不好维护。而且不需要解析成dom元素可以直接操作dom元素(总的来说执行效率高开发效率低)*/createHTML() {// 生成html字符串var html ;// 遍历商品数据for (var i 0; i this.uiData.uiGoods.length; i) {// 获取单个商品数据var g this.uiData.uiGoods[i];// 将单个商品数据转换为html字符串这里进行了拼接。因为这里是拼接所以需要使用。而且拼接之后就不用在html中添加div了html div classgoods-itemimg src${g.data.pic} alt classgoods-picdiv classgoods-infoh2 classgoods-title${g.data.title}/h2p classgoods-desc${g.data.desc}/pp classgoods-sellspan月售 ${g.data.sellNumber}/spanspan好评率${g.data.favorRate}%/span/pdiv classgoods-confirmp classgoods-pricespan classgoods-price-unit/spanspan${g.data.price}/span/pdiv classgoods-btnsi index${i} classiconfont i-jianhao/ispan${g.choose}/spani index${i} classiconfont i-jiajianzujianjiahao/i/div/div/div/div;}// 将html字符串添加到商品列表容器中this.doms.goodsContainer.innerHTML html;}// 界面的增加increase(index) {// 增加商品数量this.uiData.increase(index);// 调用更新某个商品元素的显示状态this.updateGoodsItem(index);// 更新页脚this.updateFooter();// 跳到对应的商品this.jump(index);}// 界面的减少decrease(index) {this.uiData.decrease(index);this.updateGoodsItem(index);this.updateFooter();}// 更新某个商品元素的显示状态updateGoodsItem(index) {// 获取商品元素var goodsDom this.doms.goodsContainer.children[index];// 判断是否选中if (this.uiData.isChoose(index)) {// 选中就加上active类goodsDom.classList.add(active);} else {// 未选中就去掉active类goodsDom.classList.remove(active);}// 更新数量var span goodsDom.querySelector(.goods-btns span);// 将span元素的文本设置为当前商品的数量span.textContent this.uiData.uiGoods[index].choose;}// 更新页脚updateFooter() {// 得到总价数据var total this.uiData.getTotalPrice();// 设置配送费this.doms.deliveryPrice.textContent 配送费${this.uiData.deliveryPrice};// 设置起送费还差多少if (this.uiData.isCrossDeliveryThreshold()) {// 到达起送点就加上active类this.doms.footerPay.classList.add(active);} else {// 没有到达起送点就去掉active类this.doms.footerPay.classList.remove(active);// 如果没有到达起送点就更新还差多少钱var dis this.uiData.deliveryThreshold - total;// 四舍五入。因为计算机中小数点计算不准所以要四舍五入dis Math.round(dis);// 更新span元素的文本this.doms.footerPayInnerSpan.textContent 还差${dis}元起送;}// 设置总价toFixed(2)表示保留两位小数 是因为小数点计算不准所以要四舍五入。利用toFixed(2)将总价变为了字符串格式的数字this.doms.totalPrice.textContent total.toFixed(2);// 设置购物车的样式状态if (this.uiData.hasGoodsInCar()) {// 有商品就加上active类this.doms.car.classList.add(active);} else {// 没有商品就去掉active类this.doms.car.classList.remove(active);}// 设置购物车中的数量得到总数this.doms.badge.textContent this.uiData.getTotalChooseNumber();}// 购物车动画carAnimate() {this.doms.car.classList.add(animate);// 去除动画结束事件但是这样写的话动画结束事件会被执行两次。而且每写一次都会有一次动画结束事件。直接在开始写一个动画结束事件在动画结束事件中去掉动画结束事件这样就只会执行一次动画结束事件。 上面的listenEvent()方法中有写过效果一样的// this.doms.car.addEventListener(animationend, function () {// // 这里的this是动画事件触发的元素// this.classList.remove(animate);// });}// 抛物线跳跃的元素jump(index) {// 找到对应商品的加号var btnAdd this.doms.goodsContainer.children[index].querySelector(.i-jiajianzujianjiahao);// 得到加号的坐标var rect btnAdd.getBoundingClientRect();// 起始坐标var start {x: rect.left,y: rect.top,};// 跳吧var div document.createElement(div);// div的样式div.className add-to-car;var i document.createElement(i);// i的样式i.className iconfont i-jiajianzujianjiahao;// 设置初始位置div管横向i管纵向div.style.transform translateX(${start.x}px);i.style.transform translateY(${start.y}px);// 将i添加到div中div.appendChild(i);// 将div添加到body中document.body.appendChild(div);// 强行渲染div.clientWidth;// 设置结束位置添加一个过渡效果div.style.transform translateX(${this.jumpTarget.x}px);i.style.transform translateY(${this.jumpTarget.y}px);var that this;// 过渡结束后删除div 是为了防止动画结束后div还在body中导致动画结束后div还会执行动画结束事件div.addEventListener(transitionend,function () {div.remove();// 购物车动画得到触发that.carAnimate();},{once: true, // 事件仅触发一次});}
}var ui new UI();// 事件
// 添加点击事件
ui.doms.goodsContainer.addEventListener(click, function (e) {// 判断点击的元素是否是加号if (e.target.classList.contains(i-jiajianzujianjiahao)) {// 得到商品的索引如果点击的是加好就加1如果点击的是减号就减1。这里将索引(字符串)转成数字类型var index e.target.getAttribute(index);ui.increase(index);} else if (e.target.classList.contains(i-jianhao)) {var index e.target.getAttribute(index);ui.decrease(index);}
});// 按键事件如果用户按了号就输出Equal如果按了-号就输出Minus。这里只是演示实际开发中按键事件要用到keydown事件。
window.addEventListener(keypress, function (e) {if (e.code Equal) {ui.increase(0);} else if (e.code Minus) {ui.decrease(0);}
});/*
也可以用这种方式写但是用这种方式写的话会导致代码冗余
function UIGoods(g) {this.data g;this.choose 1;
}
UIGoods.prototype.getTotalPrice function(){return this.data.price * this.choose;
}
UIGoods.prototype.isChoose function(){return this.choose 0;
}
new UIGoods(goods[0]);*/// 提前优化的优缺点永远不要提前优化因为优化之后代码会变得更复杂、可读性会变差。
// 什么时候优化出问题的时候优化一下。要么就是出问题了要么就是出问题了要么就是出问题了。效果图
