文章目录
- 前言
- 一、登录页
- 二、首页
- 三、我的购物车页
- 四、我的订单页
- 五、确认订单页
- 六、详情页
- 七、整体结构和效果图
- 总结
前言
仿小米商城官网项目是本人实训内容，实训老师带着做的首页和登录页，本人在此基础上加入了我的购物车页，我的订单页，确认订单页以及详情页。此项目是学习html+css+js以来第一个比较完整的项目练习，知识都很基础，不是很难，用心学是会学会的。本人从中学到了很多关键且使用的技术。
一、登录页
用户通过输入账号密码进行登录，此次项目测试账号：admin 测试密码：123123，以下是登录页面实现登陆操作的代码：
登录页面设计如下所示：
登录页html代码如下所示：
小米账号-登录 登录页css代码如下所示：
body { font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-variant: tabular-nums; font-feature-settings: "tnum", "tnum"; } /* 媒体查询设置不同屏幕下左边背景的宽度 */ @media screen and (min-width:1000px) { .wrap_bg { width: 200px; } } @media screen and (min-width:1200px) { .wrap_bg { width: 375px; } } .wrap { /* 给父级元素设置弹性盒，两个块还一行显示 */ display: flex; } .wrap_bg { height: 100vh; /* 设置背景图片 */ background-image: url("../images/bg.jpg"); /* 缩放图片适应容器 */ background-size: cover; /* 图片居中 */ background-position: 50%; } .login { /* 占用弹性盒父元素的剩余空间 */ flex-grow: 1; height: 100vh; } /* ---------------标题------------------- */ .login_hd { height: 40px; padding: 20px; } /* 左 */ .hd_left { float: left; font-size: 26px; color: #333; font-weight: 500; } .hd_left .logo { width: 40px; height: 40px; } /* 右 */ .hd_right { float: right; margin-right: 20px; } .hd_right li { float: left; line-height: 40px; margin: 0 10px; } .hd_right li a { color: #838383; } .hd_right li:hover a { color: #ff6700; } /* -------------登录主体内容------------ */ .login_box { padding-top: 20px; } .login_card { width: 360px; padding: 40px 45px; /* 盒子居中显示 */ margin: 0 auto; /* 阴影 */ box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%); position: relative; /* 添加圆角 */ border-radius: 4; } /* -----标题------- */ .login_card .title { display: inline-block; color: #333; font: bold 24px/40px "黑体"; border-bottom: 4px solid #ff6700; } /* 二维码 */ .login_card .two { position: absolute; right: 0px; top: 0; } /* ------输入框和密码框------- */ .user_box { margin-top: 20px; } .user { width: 354px; height: 60px; /* 设置怪异盒模型 */ box-sizing: border-box; background: #fcf2f3; /* 设置圆角 */ border-radius: 4px; position: relative; } .user label{ color: #f04645; font-weight: 400; font-size: 17px; position: absolute; left:15px; top:20px; /* 添加过渡效果 */ transition: 0.5s; } .user input{ width: 80%; height: 30px; margin-top:25px; margin-left: 15px; /* 去除input的边框 */ border: none; /* 去除input的轮廓线 */ outline: none; /* */ font-size: 20px; background: none; } /* ----光标进入input，让文字小点，位置靠上一点 */ .user input:focus+label{ font-size: 12px; top:8px } .user_box .user_msg{ font-size:12px; color: #f04645; margin: 10px auto 20px; } .login_btn{ width: 354px; height: 60px; background: #ff5c00; text-align: center; font:bold 18px/60px "黑体"; /* 去除边框 */ border: none; color:#fff; opacity: .4; border-radius: 4px; } /* 登录说明 */ .login_other{ line-height: 50px; } .login_other a{ color: #ff5c00; font-size: 16px; } .login_other .l_right{ float: right; } /*------- 登录方式 ------ */ .login_method{ margin-top: 20px; text-align: center; } /* 标题 */ .login_method h3{ font-size: 17px; color:#aaa; line-height: 40px; } .method_list a{ display: inline-block; margin: 0 10px; } .method_list img{ width: 40px; height: 40px; }二、首页
首页主要是轮播图的设计与实现（可手动轮播，也可以自动轮播），商品列表以及商品展示，浮动与按压效果是实现，此外还设计了视频专栏，小米秒杀专栏，下载app弹出窗和购物车弹出窗设计。
点击导航栏购物车，或者点击工具条上的购物车可跳转到我的购物车页面，点击登录跳转到登录页，还有回到顶部效果的实现。以下是首页效果图：
首页部分代码如下：
下载app
小米商城app
function getStyle(obj, name) { //name传字符串 if (window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } } function move(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); if (current > target) { speed = -speed; } obj.timer = setInterval(function() { //获取box原来的left值 var oldValue = parseInt(getStyle(obj, attr)); //在旧值得基础上增加 var newValue = oldValue + speed; if (speed < 0 && newValue < target || speed > 0 && newValue > target) { newValue = target; } //将新值设置给box obj.style[attr] = newValue + "px"; //当元素移动到执行动画目标时，使其停止执行动画 if (newValue == target) { clearInterval(obj.timer); //动画执行完毕，调用回调函数 //有callback执行，没有的话不执行 这样参数可不写 callback && callback(); } }, 30); }//小米秒杀 var swiper_slide = document.querySelectorAll(".swiper-slide"), swiper_wrapper = document.querySelector(".swiper-wrapper"), btn_left = document.querySelector(".swiper-controls .swiper-flashsale-prev"), btn_right = document.querySelector(".swiper-controls .swiper-flashsale-next"), iNow = 0, //记录当前位置，每4个一组 count = Math.ceil(13 / 4) - 1, //最大位置下标 timers = null; //动态生成ul的宽 var swiperLiWidth = swiper_slide[0].offsetWidth + 14; swiper_wrapper.style.width = swiperLiWidth * (swiper_slide.length + 1) + "px"; //启动定时器，自己进行滚动 timers = setInterval(function() { iNow++; if (iNow > count) { iNow = 0; } tab(); // console.log(iNow); }, 5000); btn_right.onclick = function() { clearInterval(timers); iNow++; // 设置index的范围 iNow = iNow >= count ? count : iNow; tab(); } btn_left.onclick = function() { clearInterval(timers); iNow--; // 设置index的范围 iNow = iNow <= 0 ? 0 : iNow; tab(); } tab(); //先调用一次，让箭头样式先改变 function tab() { //设值箭头样式 iNow == 0 ? btn_left.classList.add("swiper-button-disabled") : btn_left.classList.remove("swiper-button-disabled"); iNow == count ? btn_right.classList.add("swiper-button-disabled") : btn_right.classList.remove("swiper-button-disabled"); //移动的距离 var iTarget = iNow == count ? -swiperLiWidth * 4 * 2 - swiperLiWidth : -swiperLiWidth * 4 * iNow; swiper_wrapper.style.transitionDuration = "1000ms"; swiper_wrapper.style.transform = 'translate3d(' + iTarget + "px" + ' ,0,0)'; }var sli_ul = document.querySelector(".sli-ul"), sli_li = document.querySelectorAll(".sli-ul li"), sli_box = document.querySelector(".sli-box"), left = document.querySelector(".slideshow .left"), right = document.querySelector(".slideshow .right"), aAll = document.querySelectorAll(".sli-box a"); //动态生成ul的宽 var liWidth = sli_li[0].offsetWidth; var ulWidth = liWidth * sli_li.length; sli_ul.style.width = ulWidth + "px"; //动态使箭头居中 var leftT = (sli_li[0].offsetHeight - left.offsetHeight) / 2; left.style.top = leftT + "px"; var rightT = (sli_li[0].offsetHeight - right.offsetHeight) / 2; right.style.top = rightT + "px"; //创建index保存索引 var index = 0; //设置默认a的样式 aAll[index].style.background = "hsla(0, 0%, 100%, .4)"; aAll[index].style.borderColor = "rgba(0, 0, 0, .4)"; //点击导航索引，让图片切换 for (var i = 0; i < aAll.length; i++) { aAll[i].num = i; aAll[i].onclick = function() { //关闭自动切换的定时器 clearInterval(timer); //获取点击a的索引，并赋值给index index = this.num; setA(); //切换图片 move(sli_ul, "left", -liWidth * index, 150, function() { }); } } //设置一个方法用来设置选中的a function setA() { //判断当前图片是否是最后一张 if (index >= sli_ul.children.length - 1) { sli_ul.style.left = 0; index = 0; } for (var i = 0; i < aAll.length; i++) { aAll[i].style.background = ""; aAll[i].style.borderColor = ""; //给选中的a设置样式 aAll[index].style.background = "hsla(0, 0%, 100%, .4)"; aAll[index].style.borderColor = "rgba(0, 0, 0, .4)"; //判断当前索引，为2时更换所有a的样式 if (index == 2) { aAll[i].classList.add("boxA"); } else if (index == 4) { aAll[i].classList.remove("boxA"); } } } //开启自动切换图片 autoChange(); //定义一个自动切换的定时器标识 var timer; //创建一个函数，用来开启自动切换图片 function autoChange() { //开启一个定时器，用来定时去切换图片 timer = setInterval(function() { index++; //执行动画，切换图片 move(sli_ul, "left", -liWidth * index, 150, function() { //修改导航按钮 setA(); }); }, 3000); } var flag = true; //定义节流阀 //节流阀用于防止用户滑动的太快，影响视觉，和 banner图的观赏 //这里必须等动画完成后才能进行下一张或者上一张图片的更换 //箭头切换图片功能 left.onclick = function() { if (flag){ flag=false; clearInterval(timer) if (index <= 0) { index = sli_ul.children.length-1; sli_ul.style.left = -liWidth * index + "px"; } index--; move(sli_ul, "left", -liWidth * index, 150, function() { flag = true; // 打开节流阀 }); setA(); } } //right right.onclick = function() { if (flag){ flag=false; clearInterval(timer); if (index >= sli_ul.children.length - 1 ) { index = 0; sli_ul.style.left = 0; } index++; //放后面 先判断再轮播 move(sli_ul, "left", -liWidth * index, 150,function(){ setA(); flag=true; }); } } //页面离开时，暂停定时器 打开时开启 document.addEventListener("visibilitychange", function() { if (document.hidden === true) { //判断当前窗口的状态 clearInterval(timer); } else { //开启自动切换图片 autoChange(); } }); //鼠标移到ul上关闭定时器 sli_ul.onmouseover = function() { clearInterval(timer); } sli_ul.onmouseout = function() { clearInterval(timer); //开启自动切换图片 autoChange(); } //鼠标移动到左键 右键关闭轮播图 left.onmouseover = function(){ clearInterval(timer); } left.onmouseout = function(){ clearInterval(timer); autoChange(); } right.onmouseover = function(){ clearInterval(timer); } right.onmouseout = function(){ clearInterval(timer); autoChange(); }// app 初始化qpp var J_app = document.getElementById("j-app"), appCode = document.querySelector(".appcode"); J_app.onmouseover = function() { appCode.style.height = "148px"; J_app.classList.add('active'); } J_app.onmouseout = function() { appCode.style.height = "0"; J_app.classList.remove('active'); } /*购物车*/ var j_menu = document.querySelector(".j-menu"), site_Shop = document.querySelector(".site-shop"), cartColor = document.querySelector(".cart"); site_Shop.onmouseover = function() { j_menu.style.height = "99px"; cartColor.classList.add("cart-color"); } site_Shop.onmouseout = function() { j_menu.style.height = "0"; cartColor.classList.remove("cart-color"); } /*搜索框*/ var searchText = document.querySelector(".search-text"), searchBtn = document.querySelector(".search-btn"); searchText.onfocus = function() { searchText.classList.add("allBorder"); searchBtn.classList.add("allBorder"); } searchText.onblur = function() { searchText.classList.remove("allBorder"); searchBtn.classList.remove("allBorder"); } /*nav - js*/ var headerNavMenu = document.querySelectorAll(".header-nav-menu"), navItem = document.querySelectorAll(".nav-item"); for (var i = 0; i < navItem.length; i++) { navItem[i].index = i; navItem[i].onmouseover = function() { for (var i = 0; i < headerNavMenu.length; i++) { headerNavMenu[i].style.display = "none"; } headerNavMenu[this.index].style.display = "block"; headerNavMenu[this.index].style.borderTop = "1px solid #e0e0e0"; headerNavMenu[this.index].classList.add("menuHeight"); } navItem[i].onmouseout = function() { headerNavMenu[this.index].classList.remove("menuHeight"); headerNavMenu[this.index].style.border = "none"; } } // 全部商品分类 var category_list = document.querySelectorAll(".category-list"), commodity = document.querySelectorAll(".commodity"); for (var i = 0; i < category_list.length; i++) { category_list[i].index = i; category_list[i].onmouseover = function() { for (var i = 0; i < commodity.length; i++) { commodity[i].style.display = "none"; } commodity[this.index].style.display = "block"; category_list[this.index].classList.add("listBcolor"); } category_list[i].onmouseout = function() { category_list[this.index].classList.remove("listBcolor"); commodity[this.index].style.display = "none"; } } //倒计时 var spans = document.querySelectorAll(".countdown span"); //先调用一次，防止刷新空白 count(); // 定时器 var times = setInterval(count, 1000); function count() { var date = new Date(); var InDate = new Date('2021-4-15 23:00:00'); var sInDate = (InDate.getTime() - date.getTime()) / 1000; //小时 var hr = parseInt(sInDate / 60 / 60 % 24); //分钟 var min = parseInt(sInDate / 60 % 60); //秒 var sec = parseInt(sInDate % 60); //添加成为00 hr = hr < 10 ? "0" + hr : hr; min = min < 10 ? "0" + min : min; sec = sec < 10 ? "0" + sec : sec; //给span赋值 spans[0].innerHTML = hr; spans[1].innerHTML = min; spans[2].innerHTML = sec; //关闭定时器，使时间变为00：00：00 if (sInDate <= 0) { clearInterval(times); spans[0].innerHTML = "00"; spans[1].innerHTML = "00"; spans[2].innerHTML = "00"; } } //微信 var J_followWxImg = document.getElementById("J_followWxImg"), J_followWx = document.getElementById("J_followWx"); J_followWx.onmouseover = function() { J_followWxImg.style.display = "block"; } J_followWx.onmouseout = function() { J_followWxImg.style.display = "none"; } //底部图片切换 var J_safeAuth = document.querySelector(".J_safeAuth"); setInterval(function() { J_safeAuth.classList.add("active"); }, 2000); setInterval(function() { J_safeAuth.classList.remove("active"); }, 4000); //回顶部 var J_atop = document.getElementById("J_atop"); // 当网页向下滑动 854px 出现"返回顶部" 按钮 window.onscroll = function() { scrollFun() }; function scrollFun() { if (document.body.scrollTop > 854 || document.documentElement.scrollTop > 854) { J_atop.classList.add("active"); } else { J_atop.classList.remove("active"); } } //这里定义返回底部的方法 function topFun() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } //点击返回顶部 J_atop.onclick = function() { topFun(); }function tabS(obj) { var tabWrap = document.querySelector(obj); var tabList = tabWrap.querySelectorAll(".tab-list li"); var tabUl = tabWrap.querySelectorAll(".brick-list"); tabList[0].classList.add("tab-active"); for (var i = 0; i < tabList.length; i++) { tabList[i].num = i; tabList[i].onmouseover = function() { for (var i = 0; i < tabList.length; i++) { tabList[i].className = ""; } tabList[this.num].classList.add("tab-active"); for (var j = 0; j < tabUl.length; j++) { tabUl[j].classList.add("hide"); } tabUl[this.num].classList.remove("hide"); } } } tabS(".home-appliances-box"); tabS(".home-ability-box"); tabS(".home-match-box"); tabS(".home-mountings-box"); tabS(".home-rim-box");三、我的购物车页
在我的购物车页面，点击我的订单可以跳转到我的订单页面，可以对商品进行选择，数量的加减以及去结算跳转到确认订单页面。基本页面效果如下所示：
我的购物车页部分代码：
小米商城 全选商品名称单价数量小计操作
小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元小米MIX 2S 全网通版 6GB内存 陶瓷标准版 64GB 白色 64GB3199元3199元继续购物 共 0 件商品，已选择 0 件买购物车中商品的人还买了
$(function(){
//初始化总价, 总选择数, 总条数;
doPrice();
//全选/选择框的鼠标移上变个颜色
$('.fa-check').mouseover(function(){
if($(this).attr('class')!='fa fa-check checked') {
$(this).css('color', '#ff6a00');
}
})
$('.fa-check').mouseleave(function(){
$(this).css('color','#fff');
})
//普通勾选
$('.fa-check').click(function(){
var cla=$(this).attr('class');
if(cla!='fa fa-check checked'){
$(this).attr('class','fa fa-check checked');
}else{
$(this).attr('class','fa fa-check');
}
doCheckAll();
doPrice();
})
//全选框勾选
$('#check-all').click(function () {
var cla=$(this).attr('class');
if(cla!='fa fa-check checked'){
$('.fa-check').attr('class','fa fa-check checked');
}else{
$('.fa-check').attr('class','fa fa-check');
}
doPrice();
})
//检查是否全选
function doCheckAll(){
var allitem=$('.list-item i[class*="fa-check"]').length;
var checkeditem=$('.list-item i[class$="checked"]').length;
if(allitem!=checkeditem){
$('#check-all').attr('class','fa fa-check');
}else{
$('#check-all').attr('class','fa fa-check checked');
}
}
//加减按钮
$('button.minus').click(function(){
var nowvalue=$(this).siblings('input').val();
nowvalue=parseInt(nowvalue);
var currentvalue=0;
nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1;
$(this).siblings('input').val(currentvalue);
//计算当前的小计
var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html());
var xiaoji=danjia*currentvalue;
$(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元');
//更新总价
doPrice();
})
$('button.plus').click(function(){
var nowvalue=$(this).siblings('input').val();
nowvalue=parseInt(nowvalue);
var currentvalue=nowvalue+1;
$(this).siblings('input').val(currentvalue);
//计算当前的小计
var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html());
var xiaoji=danjia*currentvalue;
$(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元');
//更新总价
doPrice();
})
function doPrice(){
//统计所有勾选了的值;
var items=$('.list-item i[class*="fa-check"]');
var checkeditems=$('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price')
var totalprice=0;
for(var i=0;i
totalprice+=parseFloat(checkeditems[i].innerHTML);
}
//改总价
$('.sum-price').html(totalprice);
//改选中数
$('.select-count').html(checkeditems.length);
//改总条数
$('.all-count').html(items.length);
}
})
四、我的订单页
在我的订单页中可以点击购物车跳转到购物车页面，点击头部的小米商城可跳转到首页，以及整体布局的完善与实现。如下图所示：
我的订单页部分代码展示：
我的订单—小米商城
首页 > 交易订单
- 订单中心
- 我的订单
- 意外保
- 团购订单
- 评价晒单
- 话费充值订单
- 以旧换新订单
- 个人中心
- 我的个人中心
- 消息通知
- 购买资格
- 现金账户
- 小米礼品卡
- 现金券
- 喜欢的商品
- 优惠券
- 收货地址
- 售后服务
- 服务记录
- 申请服务
- 领取快递报销
- 账户管理
- 个人信息
- 修改密码
- 社区VIP认证
我的订单 请谨防钓鱼链接或诈骗电话，了解更多>
- 全部有效订单
- 待支付
- 待收货
- 已关闭
已收货
2016年09月02日 10：00 | XXX | 订单号： 1234455513234 |在线支付 订单金额： 149 元
家居沙发 灰色
356元 X 1
订单详情
售后详情
五、确认订单页
在此页面，点击我的订单可以跳转到我的订单页面，点击添加新地址可以实现添加地址操作，点击商品可跳转到商品详情页以及选择配送时间。效果如下图：
此页面部分代码如下：
填写订单信息
收货地址
xxx
177****2345
河北 xx市 xx区 xx街道
xx栋 1405室
删除
xxx
177****2345
河北 xx市 xx区 xx街道
xx栋 1405室
删除
添加新地址
配送方式 包邮
配送时间
不限送货时间：周一至周日
工作日送货：周一至周五
双休日、假日送货：周六至周日
发票电子发票 个人 商品明细 修改 >
商品及优惠券 返回购物车
.jpg)
红米6A 全网通版 2GB内存 16GB 流沙金 599元 x 1
599元
.jpg)
小米8 SE 全网通版 4GB内存 64GB 金色 1799元 x 1
1799元
使用优惠券
使用小米礼品卡
商品件数 :3件
商品总价 :4999元
优惠活动 :-0元
优惠券抵扣 :-0元
运费 :0元
应付总额 :4999 元
$(function(){
$('.close_data h5').click(function(){
$('.close_data h5').css('borderColor','#ccc');
$(this).css('borderColor','#ff6a00');
})
$('.close_add .del').click(function(){
$(this).parents('.close_add').remove();
})
})
六、详情页
在详情页中可以点击购物车跳转到购物车页面，点击头部的小米商城可跳转到首页，点击我的订单可以跳转到我的订单页，以及整体布局的完善与实现。可以对版本，颜色和保障服务进行选择，选择之后总价的变化效果等，如下图所示：
此页面部分代码如下所示：
红米6A立即购买—小米商城
红米6A
12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身
599
北京 北京市 东城区 永定门外街道 修改
有现货
选择版本
4GB+64GB 全网通 599元
6GB+64GB 全网通 699元
选择颜色
金色
深灰
亮红
亮蓝
选择小米提供的保障服务
了解保障服务 >
小米8 6GB+64GB 黑色
699元
总计 ： 699元
加入购物车
7天无理由退货 15天质量问题换货 365天保修
特别说明
官方微信
$(function(){
// 默认选中第一个版本/第一个颜色
$('.detail_color_left').eq(0).attr('class','detail_color_left checked');
$('.detail_much_left').eq(0).attr('class','detail_much_left checked');
updateTotalPrice()
//点击选中其他的颜色
$('.detail_color_left').click(function(){
$('.detail_color_left').attr('class','detail_color_left');
$(this).attr('class','detail_color_left checked');
updateTotalPrice()
});
//点击选中手机版本
$('.detail_much_left').click(function(){
$('.detail_much_left').attr('class','detail_much_left');
$(this).attr('class','detail_much_left checked');
updateTotalPrice();
})
//点击保障服务
$('.shop_detail_bz1').click(function(){
var nowcircleclass=$(this).find('.fa-check-circle').attr('class');
var nowclass=$(this).find('.fa-check-square').attr('class');
if(nowcircleclass.indexOf('checked')>0){
//如果存在,则移除选中;
nowcircleclass=nowcircleclass.replace('checked','');
nowclass=nowclass.replace('checked','');
$(this).find('.fa-check-circle').attr('class',nowcircleclass);
$(this).find('.fa-check-square').attr('class',nowclass);
}else{
//不存在, 则选中
$(this).find('.fa-check-circle').attr('class',nowcircleclass+' checked');
$(this).find('.fa-check-square').attr('class',nowclass+' checked');
}
updateTotalPrice();
})
//统计总价格
function updateTotalPrice(){
//版本价钱
var bbprice=$(".detail_much_left[class$='checked']").find('span').attr('data-val')*1;
//服务价钱
var svprice=0;
var svspan=$(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');
for(var i=0;i
svprice+=svspan[i].getAttribute('data-val')*1;
}
//总价值
var totalprice=bbprice+svprice;
$('#totalPrice').html('总计 ： '+totalprice+'元')
$('#phonePrice').html(bbprice+'元');
}
})
七、整体结构和效果图
总结
以上便是小米商城项目了，小米商城官网项目代码太多了，只能在这里放部分代码了，如果大家对此项目感兴趣，或者需要小米商城项目源码的可以关注私聊我，我随时都在。
百度分享代码，如果开启HTTPS请参考李洋个人博客
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...