文章目录

前言
一、登录页
二、首页
三、我的购物车页
四、我的订单页
五、确认订单页
六、详情页
七、整体结构和效果图
总结

前言

仿小米商城官网项目是本人实训内容，实训老师带着做的首页和登录页，本人在此基础上加入了我的购物车页，我的订单页，确认订单页以及详情页。此项目是学习html+css+js以来第一个比较完整的项目练习，知识都很基础，不是很难，用心学是会学会的。本人从中学到了很多关键且使用的技术。

一、登录页

用户通过输入账号密码进行登录，此次项目测试账号：admin 测试密码：123123，以下是登录页面实现登陆操作的代码：

        function fun() {
            /* 
             1.如果账号等于：admin
             2.并且密码等于：123123
             if(登录成功){
                跳转到首页页面
             }else{
                警告
             }
            */

            //获取用户名
            var user = document.querySelector(".username").value;
            // 获取密码
            var pass = document.querySelector(".password").value;

            //如果账号等于：admin,并且密码等于：123123
            if (user == "admin" && pass == "123123") {
                alert("登录成功");
                //  跳转到首页
                location.href = "./index.html"
            } else {
                alert("账号或密码错误");
            }
        }

登录页面设计如下所示：

登录页

登录页html代码如下所示：



    
    
    
    
    小米账号-登录
    
    
    
    
    
    


    
        
        
        
        
            
            
                
                    
                    小米帐号
                

                
                    用户协议
                    隐私政策
                    帮助中心
                    中文(简体)
                
            

            
                
                    
                    登录
                    
                    
                        
                            
                            邮箱/手机号码/小米ID
                        
                        请输入账号
                    
                    
                    
                        
                            
                            密码
                        
                        请输入密码
                    
                    
                    
                    
                    
                        忘记密码？
                        手机号登录
                    
                    
                    
                        其他登录方式
                        
                            
                            
                            
                        
                    
                
            
        
    

    
        function fun() {
            /* 
             1.如果账号等于：admin
             2.并且密码等于：123123
             if(登录成功){
                跳转到首页页面
             }else{
                警告
             }
            */

            //获取用户名
            var user = document.querySelector(".username").value;
            // 获取密码
            var pass = document.querySelector(".password").value;

            //如果账号等于：admin,并且密码等于：123123
            if (user == "admin" && pass == "123123") {
                alert("登录成功");
                //  跳转到首页
                location.href = "./index.html"
            } else {
                alert("账号或密码错误");
            }
        }

登录页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

购物车

回到顶部

首页部分代码如下：

 
                    
                        购物车
                         (0) 
                    
                    
                        购物车中还没有商品，赶紧选购吧！

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  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 白色 64GB 3199元 3199元

小米MIX 2S 全网通版 6GB内存陶瓷标准版 64GB 白色 64GB 3199元 3199元继续购物共 0 件商品，已选择 0 件合计: 0 元

买购物车中商品的人还买了

小米5X 4GB+64GB

光学变焦双摄，拍人更美

1499 元

享八折

小米MIX 2 全陶瓷尊享版

全面屏2.0，Unibody 全陶瓷

3699元 ~~4699 元~~

红米5A 2GB内存

8天超长待机，137g轻巧机身

599元

红米5 Plus 3GB+32GB

全面屏手机，4000mAh大电量

999元

红米S2 3GB+32GB

前置1600万超大像素智能美拍

999元

小米Note 3 4GB+64GB

1600万美颜自拍，2倍变焦双摄

1799元 ~~1999元~~

红米5 2GB+16GB

5.7英寸全面屏，前置柔光自拍

799元

小米Max 2 4GB+64GB

6.44''大屏，5300mAh 充电宝级的大电量

1499元 ~~1699元~~

预约维修服务 7天无理由退货 15天免费换货满150元包邮 520余家售后网点

帮助中心: 账户管理; 购物指南; 订单操作

服务支持: 售后政策; 自助服务; 相关下载

线下门店: 小米之家; 服务网点; 授权体验店

关于小米: 了解小米; 加入小米; 投资者关系

关注我们: 新浪微博; 官网微博; 联系我们

特色服务: F码通道; 礼物码; 防伪查询

Feir-520-1314

周一至周日 8:00-18:00
(仅收市话费)

小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS

小米商城
MIUI
米家
米聊
多看
游戏
路由器
米粉卡
政企服务
小米天猫店
隐私政策
问题反馈
Select Region

©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

探索黑科技，小米为发烧而生！

$(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<checkeditems.length;i++){
            totalprice+=parseFloat(checkeditems[i].innerHTML);
        }
        //改总价
        $('.sum-price').html(totalprice);
        //改选中数
        $('.select-count').html(checkeditems.length);
        //改总条数
        $('.all-count').html(items.length);

    }
})

四、我的订单页

在我的订单页中可以点击购物车跳转到购物车页面，点击头部的小米商城可跳转到首页，以及整体布局的完善与实现。如下图所示：

我的订单

我的订单页部分代码展示：

我的订单—小米商城

小米商城|
MIUI|
IOT|
云服务|
小爱分享平台|
金融|
有品|
企业服务|
SelectRegion

我是刘子祎|
- 个人中心
- 评价晒单
- 我的喜欢
- 小米账户
- 退出登录
消息通知|
我的订单
购物车 ( 0 ) 购物车中还没有商品，赶紧选购吧！

小米手机新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元
小米2s
3299元
小米2s
3299元
红米新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元
电视
笔记本
盒子
新品
路由器
智能硬件
服务
社区

电视新品 618预热

首页 > 交易订单

订单中心
我的订单
意外保
团购订单
评价晒单
话费充值订单
以旧换新订单
个人中心
我的个人中心
消息通知
购买资格
现金账户
小米礼品卡
现金券
喜欢的商品
优惠券
收货地址
售后服务
服务记录
申请服务
领取快递报销
账户管理
个人信息
修改密码
社区VIP认证

我的订单请谨防钓鱼链接或诈骗电话，了解更多>

全部有效订单
待支付
待收货
已关闭

已收货

2016年09月02日 10：00 | XXX | 订单号： 1234455513234 |在线支付订单金额： 149 元

家居沙发灰色
356元 X 1

订单详情

售后详情

当前没有待支付订单。

预约维修服务 7天无理由退货 15天免费换货满150元包邮 520余家售后网点

帮助中心: 账户管理; 购物指南; 订单操作

服务支持: 售后政策; 自助服务; 相关下载

线下门店: 小米之家; 服务网点; 授权体验店

关于小米: 了解小米; 加入小米; 投资者关系

关注我们: 新浪微博; 官网微博; 联系我们

特色服务: F码通道; 礼物码; 防伪查询

Feir-520-1314

周一至周日 8:00-18:00
(仅收市话费)

小米商城
MIUI
米家
米聊
多看
游戏
路由器
米粉卡
政企服务
小米天猫店
隐私政策
问题反馈
Select Region

探索黑科技，小米为发烧而生！ function ChangeReg(divId,divName,Count) { for(var i=0;i<=Count;i++){ document.getElementById(divName+i).style.display="none"; } document.getElementById(divName+divId).style.display="block"; if (divId==0) { document.getElementById("regTabs_0").style.color="#FF6A00"; document.getElementById("regTabs_1").style.color="#757575"; } if (divId==1) { document.getElementById("regTabs_0").style.color="#757575"; document.getElementById("regTabs_1").style.color="#FF6A00"; } }

五、确认订单页

在此页面，点击我的订单可以跳转到我的订单页面，点击添加新地址可以实现添加地址操作，点击商品可跳转到商品详情页以及选择配送时间。效果如下图：

确认订单

添加地址

此页面部分代码如下：

填写订单信息

确认订单

我是刘子祎

个人中心
评价晒单
我的喜欢
小米账户
退出登录

我的订单

收货地址

xxx

177****2345

河北 xx市 xx区 xx街道

xx栋 1405室

删除

xxx

177****2345

河北 xx市 xx区 xx街道

xx栋 1405室

删除

添加新地址

配送方式包邮

配送时间

不限送货时间：周一至周日

工作日送货：周一至周五

双休日、假日送货：周六至周日

发票电子发票个人商品明细修改 >

商品及优惠券返回购物车

小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS 红米6A 全网通版 2GB内存 16GB 流沙金 599元 x 1 599元

小米商城官网（登录页，首页，详情页，我的购物车页，我的订单页，确认订单页）HTML+CSS+JS 小米8 SE 全网通版 4GB内存 64GB 金色 1799元 x 1 1799元

使用优惠券

使用小米礼品卡

商品件数 :3件

商品总价 :4999元

优惠活动 :-0元

优惠券抵扣 :-0元

运费 :0元

应付总额 :4999 元

预约维修服务 7天无理由退货 15天免费换货满150元包邮 520余家售后网点

帮助中心: 账户管理; 购物指南; 订单操作

服务支持: 售后政策; 自助服务; 相关下载

线下门店: 小米之家; 服务网点; 授权体验店

关于小米: 了解小米; 加入小米; 投资者关系

关注我们: 新浪微博; 官网微博; 联系我们

特色服务: F码通道; 礼物码; 防伪查询

Feir-520-1314

周一至周日 8:00-18:00
(仅收市话费)

小米商城
MIUI
米家
米聊
多看
游戏
路由器
米粉卡
政企服务
小米天猫店
隐私政策
问题反馈
Select Region

探索黑科技，小米为发烧而生！ layui.use('form', function(){ var form = layui.form; form.render(); }); //弹窗 $('.close_add1').click(function(){ layer.open({ area:['900px'], title: '填写新地址', content: ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' ' + ' 请选择你的省' + ' 北京 ' + ' 上海 ' + ' 广州 ' + ' 深圳 ' + ' 安徽 ' + ' ' + ' \n' + ' \n' + ' ' + ' 请选择你的城市' + ' 合肥 ' + ' 北京 ' + ' 上海 ' + ' 深圳 ' + ' ' + ' \n' + ' \n' + ' ' + ' 请选择你的区' + ' 蜀山 ' + ' 肥东 ' + ' 肥西 ' + ' 政务区 ' + ' ' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' \n' + ' ' }); })


$(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立即购买—小米商城

小米商城|
MIUI|
IOT|
云服务|
小爱分享平台|
金融|
有品|
企业服务|
SelectRegion

登录|
注册|
我的订单
购物车 ( 0 ) 购物车中还没有商品，赶紧选购吧！

小米手机新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元
小米2s
3299元
小米2s
3299元
红米新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元新品
小米2s
3299元
电视
笔记本
盒子
新品
路由器
智能硬件
服务
社区

电视新品 618预热小米8小米8 SE 概述图集参数 F码通道用户评价

红米6A

12nm高性能处理器 / 5.45" 小巧全面屏 / 1300万高清相机 / “小杨柳腰”机身

599

北京北京市东城区永定门外街道修改
有现货

选择版本

4GB+64GB 全网通 599元 6GB+64GB 全网通 699元

选择颜色

金色深灰亮红亮蓝

选择小米提供的保障服务

了解保障服务 >

意外保障服务

手机意外摔落/进水/碾压等损坏

我已阅读服务条款 | 服务条款 99元
碎屏保障服务

手机意外碎屏
我已阅读服务条款 | 服务条款 179元
小米8 6GB+64GB 黑色
699元
总计：699元
加入购物车
7天无理由退货 15天质量问题换货 365天保修

特别说明

官方微信
预约维修服务 7天无理由退货 15天免费换货满150元包邮 520余家售后网点

帮助中心

账户管理

购物指南

订单操作

服务支持

售后政策

自助服务

相关下载

线下门店

小米之家

服务网点

授权体验店

关于小米

了解小米

加入小米

投资者关系

关注我们

新浪微博

官网微博

联系我们

特色服务

F码通道

礼物码

防伪查询

Feir-520-1314

周一至周日 8:00-18:00
(仅收市话费)

小米商城

MIUI

米家

米聊

多看

游戏

路由器

米粉卡

政企服务

小米天猫店

隐私政策

问题反馈

Select Region

©mi.com 京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试探索黑科技，小米为发烧而生！ layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' ,width: '560px' //设置容器宽度 ,height:'560px' ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); });

$(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<svspan.length;i++){ svprice+=svspan[i].getAttribute('data-val')*1; } //总价值 var totalprice=bbprice+svprice; $('#totalPrice').html('总计：'+totalprice+'元') $('#phonePrice').html(bbprice+'元'); } })

七、整体结构和效果图

总结

以上便是小米商城项目了，小米商城官网项目代码太多了，只能在这里放部分代码了，如果大家对此项目感兴趣，或者需要小米商城项目源码的可以关注私聊我，我随时都在。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/424049a67a.html