对于手机端商城购物系统的仿写，首先制作tab栏，通过点击来实现四个页面的跳转，再分别对四个网页展开制作。
body {
margin: 0px;
padding: 0px 0px 70px 0px;
font-size: 14px;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
/********** tabbar **********/
.iot_tabbar_container {
display: flex;
justify-content: space-between;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
width: 100vw;
padding: 10px 0px;
z-index: 9;
border-top: 1px solid #ececec;
background-color: #FFFFFF;
}
.iot_tabbar_item {
width: 25%;
cursor: pointer;
position: relative;
}
.iot_tabbar_name_select {
width: 25%;
cursor: pointer;
color: #d81e06;
position: relative;
}
.iot_tabbar_icon {
width: 24px;
height: 24px;
display: block;
margin: 0px auto 5px auto;
}
.iot_tabbar_name {
line-height: 20px;
text-align: center;
}
.iot_tabbar_unread {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 10px;
text-align: center;
color: #FFFFFF;
background-color: #FF0000;
font-size: 12px;
position: absolute;
top: -5px;
right: calc(12.5vw - 25px);
}
开始设计首页，将首页分为搜索栏、轮播图、菜单栏以及楼层。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>小冉爱购物</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/index.css" />
</head>
<body data-type="index">
<!-- 搜索 -->
<div class="iot_filter_container">
<p style="text-align: center; font-size: 16px; font-family: 宋体; color: aliceblue;"><strong>小冉爱购物</strong></p>
<a href="search.html"><input type="text" class="iot_filter_input" placeholder="搜索" /></a>
</div>
<!-- banner -->
<div class="iot_banner_container">
<img id="iot_banner_item" />
<div id="iot_banner_step">
<img src="./img/arrow-left.png" id="iot_banner_step_pre" onclick="bannerPreFunc()" />
<img src="./img/arrow-right.png" id="iot_banner_step_next" onclick="bannerNextFunc()" />
</div>
</div>
<!-- menu -->
<div class="iot_menu_container">
</div>
<!-- floor -->
<div class="iot_floor_container">
</div>
<!-- tabbar -->
<div class="iot_tabbar_container">
<div id="iot_tabbar_item_1" class="iot_tabbar_item" data-url="./index.html">
<img id="iot_tabbar_icon_1" src="./img/tabbar-1.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_1" class="iot_tabbar_name">首页</div>
<div id="iot_tabbar_unread_1" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_2" class="iot_tabbar_item" data-url="./type.html">
<img id="iot_tabbar_icon_2" src="./img/tabbar-2.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_2" class="iot_tabbar_name">分类</div>
<div id="iot_tabbar_unread_2" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_3" class="iot_tabbar_item" data-url="./basket.html">
<img id="iot_tabbar_icon_3" src="./img/tabbar-3.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_3" class="iot_tabbar_name">购物车</div>
<div id="iot_tabbar_unread_3" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_4" class="iot_tabbar_item" data-url="./member.html">
<img id="iot_tabbar_icon_4" src="./img/tabbar-4.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_4" class="iot_tabbar_name">我的</div>
<div id="iot_tabbar_unread_4" class="iot_tabbar_unread"></div>
</div>
</div>
</body>
<script src="./js/common.js"></script>
<script src="./js/index.js"></script>
</html>
body {
padding-bottom: 82px;
}
/* 给下方tab栏留空间 */
.iot_filter_container {
background-color: #C00000;
padding: 10px;
}
.iot_filter_input {
width: 100%;
height: 30px;
border: none;
border-radius: 20px;
font-size: 16px;
text-align: center;
}
.iot_banner_container {
width: 100vw;
height: 45vw;
display: flex;
align-items: center;
position: relative;
}
#iot_banner_item {
width: 100vw;
height: 45vw;
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: -9;
}
#iot_banner_step {
width: 100vw;
height: 30px;
padding: 0px 15px;
display: flex;
justify-content: space-between;
}
#iot_banner_step_pre {
width: 30px;
height: 30px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
}
#iot_banner_step_next {
width: 30px;
height: 30px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
}
.iot_menu_container {
display: flex;
justify-content: space-around;
}
.iot_menu_item {
padding: 10px 0px;
}
.iot_menu_icon {
display: block;
width: 18vw;
}
.iot_floor_item {
width: 96vw;
margin: 0px auto;
}
.iot_floor_title {
display: block;
height: 40px;
margin: 20px 0px 10px 0px;
}
.iot_floor_content {
width: 100%;
display: flex;
justify-content: space-between;
}
.iot_floor_content_column {
width: 32%;
}
.iot_floor_content_image {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
```javascript
var activeBannerIndex = 0; //轮播图当前索引
var bannerArray; //轮播图数组
//banner接口
var bannerRequest = new XMLHttpRequest();
bannerRequest.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata");
bannerRequest.send();
bannerRequest.onreadystatechange = function (e) {
if (bannerRequest.readyState === XMLHttpRequest.DONE && bannerRequest.status === 200) {
bannerArray = JSON.parse(bannerRequest.responseText).message;
document.querySelector("#iot_banner_item").src = bannerArray[activeBannerIndex].image_src;
//定时器，每隔3000ms进行一次切换
setInterval(function () {
activeBannerIndex = (activeBannerIndex + 1) % bannerArray.length;
document.querySelector("#iot_banner_item").src = bannerArray[activeBannerIndex].image_src;
}, 3000);
}
}
//banner向前切换
function bannerPreFunc() {
if (activeBannerIndex == 0) {
activeBannerIndex = bannerArray.length - 1;
}
else {
activeBannerIndex = (activeBannerIndex - 1) % bannerArray.length;
}
document.querySelector("#iot_banner_item").src = bannerArray[activeBannerIndex].image_src;
}
//banner向后切换
function bannerNextFunc() {
activeBannerIndex = (activeBannerIndex + 1) % bannerArray.length;
document.querySelector("#iot_banner_item").src = bannerArray[activeBannerIndex].image_src;
}
//导航接口
var menuRequest = new XMLHttpRequest();
menuRequest.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
menuRequest.send();
menuRequest.onreadystatechange = function (e) {
if (menuRequest.readyState === XMLHttpRequest.DONE && menuRequest.status === 200) {
var menuArray = JSON.parse(menuRequest.responseText).message;
var menuHtml = "";
for (var i = 0; i < menuArray.length; i++) {
menuHtml += "<div class='iot_menu_item'><img src='" + menuArray[i].image_src + "' class='iot_menu_icon' /></div>";
}
document.querySelector(".iot_menu_container").innerHTML = menuHtml;
}
}
//楼层接口
var floorRequest = new XMLHttpRequest();
floorRequest.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata");
floorRequest.send();
floorRequest.onreadystatechange = function (e) {
if (floorRequest.readyState === XMLHttpRequest.DONE && floorRequest.status === 200) {
var floorArray = JSON.parse(floorRequest.responseText).message;
var floorHtml = "";
for (var i = 0; i < floorArray.length; i++) {
floorHtml += "<div class='iot_floor_item'>";
floorHtml += "<img src='" + floorArray[i].floor_title.image_src + "' class='iot_floor_title' />";
floorHtml += "<div class='iot_floor_content'>";
floorHtml += "<div class='iot_floor_content_column'>";
floorHtml += "<div style='background-image:url(" + floorArray[i].product_list[0].image_src + "); height: 310px;' class='iot_floor_content_image'></div>";
floorHtml += "</div>";
floorHtml += "<div class='iot_floor_content_column'>";
floorHtml += "<div style='background-image:url(" + floorArray[i].product_list[1].image_src + "); height: 150px; margin-bottom: 10px;' class='iot_floor_content_image'></div>";
floorHtml += "<div style='background-image:url(" + floorArray[i].product_list[2].image_src + "); height: 150px;' class='iot_floor_content_image'></div>";
floorHtml += "</div>";
floorHtml += "<div class='iot_floor_content_column'>";
floorHtml += "<div style='background-image:url(" + floorArray[i].product_list[3].image_src + "); height: 150px; margin-bottom: 10px;' class='iot_floor_content_image'></div>";
floorHtml += "<div style='background-image:url(" + floorArray[i].product_list[4].image_src + "); height: 150px;' class='iot_floor_content_image'></div>";
floorHtml += "</div>";
floorHtml += "</div>";
floorHtml += "</div>";
}
document.querySelector(".iot_floor_container").innerHTML = floorHtml;
}
}
再将分类页面分为顶部的搜索栏以及下方的左侧菜单栏、右侧页面。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>小冉爱购物</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/type.css" />
</head>
<body data-type="type">
<!-- 搜索 -->
<div class="iot_filter_container">
<p style="text-align: center; font-size: 16px; font-family: 宋体; color: aliceblue;"><strong>小冉爱购物</strong></p>
<a href="search.html"><input type="text" class="iot_filter_input" placeholder="搜索" /></a>
</div>
<!-- main -->
<div class="iot_type_container">
<div class="iot_type_left">
</div>
<div class="iot_type_right">
</div>
</div>
<!-- tabbar -->
<div class="iot_tabbar_container">
<div id="iot_tabbar_item_1" class="iot_tabbar_item" data-url="./index.html">
<img id="iot_tabbar_icon_1" src="./img/tabbar-1.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_1" class="iot_tabbar_name">首页</div>
<div id="iot_tabbar_unread_1" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_2" class="iot_tabbar_item" data-url="./type.html">
<img id="iot_tabbar_icon_2" src="./img/tabbar-2.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_2" class="iot_tabbar_name">分类</div>
<div id="iot_tabbar_unread_2" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_3" class="iot_tabbar_item" data-url="./basket.html">
<img id="iot_tabbar_icon_3" src="./img/tabbar-3.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_3" class="iot_tabbar_name">购物车</div>
<div id="iot_tabbar_unread_3" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_4" class="iot_tabbar_item" data-url="./member.html">
<img id="iot_tabbar_icon_4" src="./img/tabbar-4.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_4" class="iot_tabbar_name">我的</div>
<div id="iot_tabbar_unread_4" class="iot_tabbar_unread"></div>
</div>
</div>
</body>
<script src="./js/common.js"></script>
<script src="./js/type.js"></script>
</html>
.iot_filter_container {
background-color: #C00000;
padding: 10px;
}
.iot_filter_input {
width: 100%;
height: 30px;
border: none;
border-radius: 20px;
font-size: 16px;
text-align: center;
}
.iot_type_container {
width: 100%;
display: flex;
justify-content: space-between;
}
.iot_type_left {
width: 100px;
background-color: #F0F0F0;
height: calc(100vh - 120px);
position: fixed;
top: 100px;
left: 0px;
overflow-y: scroll;
}
.iot_type_left_item {
font-size: 14px;
line-height: 50px;
cursor: pointer;
text-align: center;
}
.iot_type_left_item_select {
font-size: 14px;
line-height: 50px;
cursor: pointer;
text-align: center;
background-color: #FFFFFF;
border-left: 2px solid #C00000;
}
.iot_type_right {
width: calc(100% - 100px);
height: calc(100vh - 120px);
position: fixed;
top: 100px;
right: 0px;
background-color: #FFFFFF;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding-top: 12px;
overflow-y: scroll;
}
.iot_type_right_item {
display: none;
width: 33.33%;
margin-bottom: 10px;
}
.iot_type_right_item_icon {
display: block;
height: 60px;
margin: 0px auto;
}
.iot_type_right_item_name {
line-height: 30px;
text-align: center;
font-size: 14px;
}
//分类
var activeCategoryId = 0;
//分类接口
var categoryRequest = new XMLHttpRequest();
categoryRequest.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/categories");
categoryRequest.send();
categoryRequest.onreadystatechange = function (e) {
if (categoryRequest.readyState === XMLHttpRequest.DONE && categoryRequest.status === 200) {
var categoryArray = JSON.parse(categoryRequest.responseText).message;
var categoryHtml = "";
var detailHtml = "";
for (var i = 0; i < categoryArray.length; i++) {
categoryHtml += "<div id='iot_category_" + categoryArray[i].cat_id + "' data-id='" + categoryArray[i].cat_id + "' class='iot_type_left_item' οnclick='getCurrentCategory(" + categoryArray[i].cat_id + ")'>" + categoryArray[i].cat_name + "</div>";
for (var j = 0; j < categoryArray[i].children.length; j++) {
detailHtml += "<div class='iot_detail_" + categoryArray[i].cat_id + " iot_type_right_item'><img src='" + categoryArray[i].children[j].cat_icon + "' class='iot_type_right_item_icon' οnerrοr='this.src=\"./img/empty.jpg\"' /><div class='iot_type_right_item_name'>" + categoryArray[i].children[j].cat_name + "</div></div>";
}
}
document.querySelector(".iot_type_left").innerHTML = categoryHtml;
document.querySelector(".iot_type_right").innerHTML = detailHtml;
getCurrentCategory(categoryArray[0].cat_id);
}
}
//点击大分类后，右侧显示分类详情
function getCurrentCategory(categoryId) {
//取消左侧目录选中状态
if (activeCategoryId > 0) {
var activeCategoryObj = document.querySelector("#iot_category_" + activeCategoryId);
activeCategoryObj.classList.remove("iot_type_left_item_select");
activeCategoryObj.classList.add("iot_type_left_item");
}
//取消右侧详情显示
if (activeCategoryId > 0) {
var oldDetailArray = document.querySelectorAll(".iot_detail_" + activeCategoryId);
for (var i = 0; i < oldDetailArray.length; i++) {
oldDetailArray[i].style.display = "none";
}
}
//修改激活ID
activeCategoryId = categoryId;
//设置左侧目录选中状态
var activeCategoryObj = document.querySelector("#iot_category_" + activeCategoryId);
activeCategoryObj.classList.remove("iot_type_left_item");
activeCategoryObj.classList.add("iot_type_left_item_select");
//设置右侧详情显示
var newDetailArray = document.querySelectorAll(".iot_detail_" + activeCategoryId);
for (var i = 0; i < newDetailArray.length; i++) {
newDetailArray[i].style.display = "block";
}
}
对于购物车的页面，则是首先完成顶部收货地址，再实现下方购物车情况。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>小冉爱购物</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/basket.css" />
</head>
<body data-type="basket">
<div class="iot_filter_container">
<p style="text-align: center; font-size: 16px; font-family: 宋体; color: aliceblue;"><strong>小冉爱购物</strong></p>
</div>
<!-- address -->
<div class="iot_address_container">
<div class="iot_address_content">
<div class="iot_address_line">
<span style="margin-right: 30px;">收货人：冉承玮</span>
<span>电话：13350548955</span>
</div>
<div class="iot_address_line">
<span>收货地址：四川省攀枝花市盐边县桐梓林镇金谷苑91栋102</span>
</div>
<div class="iot_address_line"></div>
</div>
</div>
<!-- basket -->
<div class="iot_basket_container">
<div class="iot_basket_title">购物车</div>
<div class="iot_basket_product_list">
</div>
</div>
<!-- button -->
<div class="iot_button_container">
<div class="iot_button_left">
<input id="iot_radio_all" type="checkbox" class="iot_radio_all" checked="checked" onchange="allSelect()" />
<div>全选</div>
</div>
<div class="iot_button_center">
<span>合计：</span>
<span id="iot_total_amount" style="color: #FF0000; font-weight: bold; font-size: 16px;"></span>
</div>
<button class="iot_button_right">结算</button>
</div>
<!-- tabbar -->
<div class="iot_tabbar_container">
<div id="iot_tabbar_item_1" class="iot_tabbar_item" data-url="./index.html">
<img id="iot_tabbar_icon_1" src="./img/tabbar-1.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_1" class="iot_tabbar_name">首页</div>
<div id="iot_tabbar_unread_1" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_2" class="iot_tabbar_item" data-url="./type.html">
<img id="iot_tabbar_icon_2" src="./img/tabbar-2.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_2" class="iot_tabbar_name">分类</div>
<div id="iot_tabbar_unread_2" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_3" class="iot_tabbar_item" data-url="./basket.html">
<img id="iot_tabbar_icon_3" src="./img/tabbar-3.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_3" class="iot_tabbar_name">购物车</div>
<div id="iot_tabbar_unread_3" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_4" class="iot_tabbar_item" data-url="./member.html">
<img id="iot_tabbar_icon_4" src="./img/tabbar-4.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_4" class="iot_tabbar_name">我的</div>
<div id="iot_tabbar_unread_4" class="iot_tabbar_unread"></div>
</div>
</div>
</body>
<script src="./js/common.js"></script>
<script src="./js/basket.js"></script>
</html>
.iot_filter_container {
background-color: #C00000;
padding: 10px;
}
.iot_address_container {
padding: 10px 0px 10px 0px;
}
.iot_address_line {
font-size: 14px;
line-height: 24px;
padding: 5px 15px;
}
.iot_address_container:after {
content: '';
display: block;
width: initial;
height: 3px;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
border: none;
-webkit-transform: initial;
transform: initial;
}
.iot_basket_container {
padding: 0px;
}
.iot_basket_product_item {
padding: 0px 15px;
}
.iot_basket_title {
width: 100%;
margin: 0px auto;
padding-left: 15px;
line-height: 36px;
font-size: 16px;
margin-bottom: 10px;
}
.iot_basket_product_list {
border-top: 1px solid #F0F0F0;
}
.iot_basket_product_item {
display: flex;
justify-content: space-between;
padding: 20px 15px;
border-bottom: 1px solid #F0F0F0;
}
.iot_basket_product_select {
margin-right: 5px;
display: flex;
align-items: center;
}
.iot_basket_product_checkbox {
display: block;
width: 20px;
height: 20px;
}
.iot_basket_product_image {
display: block;
width: 80px;
height: 80px;
margin: 5px 12px 5px 0px;
}
.iot_basket_product_content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.iot_basket_product_data {
display: flex;
justify-content: space-between;
padding: 0px 10px 0px 0px;
}
.iot_basket_product_prize {
font-size: 16px;
line-height: 24px;
font-weight: bold;
color: #C00000;
}
.iot_basket_product_count_container {
display: flex;
border: 1px solid #F0F0F0;
}
.iot_basket_product_count_pre {
line-height: 24px;
height: 24px;
width: 36px;
text-align: center;
border-right: 1px solid #F0F0F0;
}
.iot_basket_product_count_num {
line-height: 24px;
height: 24px;
width: 50px;
text-align: center;
border-right: 1px solid #F0F0F0;
}
.iot_basket_product_count_next {
line-height: 24px;
height: 24px;
width: 36px;
text-align: center;
}
.iot_button_container {
position: fixed;
width: 100%;
left: 0px;
bottom: 70px;
height: 40px;
display: flex;
justify-content: space-between;
padding: 0px;
border-top: 1px solid #F0F0F0;
}
.iot_button_left {
padding-left: 15px;
height: 40px;
line-height: 40px;
font-size: 14px;
display: flex;
}
.iot_radio_all {
display: block;
width: 20px;
height: 20px;
margin-top: 10px;
margin-right: 10px;
}
.iot_button_center {
font-size: 14px;
line-height: 40px;
}
.iot_button_right {
width: 100px;
height: 40px;
line-height: 40px;
color: #FFFFFF;
background-color: #C00000;
font-size: 16px;
border: none;
}
//定义购物车数组（未匹配到接口，因此使用静态数组）
var productArray = [
{
id: 1,
title: "苏泊尔不锈钢高压锅家用燃气电磁炉通用密封圈压力锅小型正品防爆",
image: "./img/basket-product-1.png",
prize: 599.00,
count: 1,
checked: true //选中状态
},
{
id: 2,
title: "官方正品中粮长城干红葡萄酒窖酿解百纳750ml×6瓶热销红酒整箱装",
image: "./img/basket-product-2.png",
prize: 149.00,
count: 1,
checked: true //选中状态
},
{
id: 3,
title: "淘宝天猫网店美工实战 视觉设计+店铺装修+移动端店铺 微课版 江玉珍",
image: "./img/basket-product-3.png",
prize: 49.29,
count: 1,
checked: true //选中状态
},
];
/**
* 页面渲染
* 基于productArray
*/
function pageInit() {
var productHtml = "";
for (var i = 0; i < productArray.length; i++) {
productHtml += "<div class='iot_basket_product_item'>";
productHtml += "<div class='iot_basket_product_select'>";
productHtml += "<input id='iot_basket_product_checkbox_" + productArray[i].id + "' οnchange='productSelect()' type='checkbox' class='iot_basket_product_checkbox' name='iot_basket_product_checkbox' checked='checked' />";
productHtml += "</div>";
productHtml += "<img src='" + productArray[i].image + "' class='iot_basket_product_image' />";
productHtml += "<div class='iot_basket_product_content'>";
productHtml += "<div class='iot_basket_product_title'>" + productArray[i].title + "</div>";
productHtml += "<div class='iot_basket_product_data'>";
productHtml += "<div class='iot_basket_product_prize'>￥" + productArray[i].prize + "</div>";
productHtml += "<div class='iot_basket_product_count_container'>";
productHtml += "<div class='iot_basket_product_count_pre' οnclick='countSub(" + productArray[i].id + ")'>-</div>";
productHtml += "<div id='iot_basket_product_count_num_" + productArray[i].id + "' class='iot_basket_product_count_num'>" + productArray[i].count + "</div>";
productHtml += "<div class='iot_basket_product_count_next' οnclick='countAdd(" + productArray[i].id + ")'>+</div>";
productHtml += "</div>";
productHtml += "</div>";
productHtml += "</div>";
productHtml += "</div>";
}
document.querySelector(".iot_basket_product_list").innerHTML = productHtml;
//初始总金额
getTotalAmount();
}
// 页面加载时，即执行，向购物车列表中渲染数据
pageInit();
/**
* 购物车商品数量+1
* 参数为当前productID
*/
function countAdd(productId) {
for (var i = 0; i < productArray.length; i++) {
if (productArray[i].id == productId) {
productArray[i].count += 1;
document.querySelector("#iot_basket_product_count_num_" + productArray[i].id).innerHTML = productArray[i].count;
}
}
getTotalAmount();
}
/**
* 购物车商品数量-1
* 参数为当前productID
*/
function countSub(productId) {
for (var i = 0; i < productArray.length; i++) {
if (productArray[i].id == productId) {
if (productArray[i].count > 1) {
productArray[i].count -= 1;
document.querySelector("#iot_basket_product_count_num_" + productArray[i].id).innerHTML = productArray[i].count;
}
}
}
getTotalAmount();
}
/**
* 全选 / 取消全选时触发
*/
function allSelect() {
var isAll = document.querySelector("#iot_radio_all").checked;
for (var i = 0; i < productArray.length; i++) {
document.querySelector("#iot_basket_product_checkbox_" + productArray[i].id).checked = isAll;
}
productSelect();
}
/**
* 商品选择触发
*/
function productSelect() {
var isAll = true;
for (var i = 0; i < productArray.length; i++) {
var chkProductObj = document.querySelector("#iot_basket_product_checkbox_" + productArray[i].id);
if (chkProductObj.checked) {
productArray[i].checked = true;
}
else {
isAll = false;
productArray[i].checked = false;
}
}
if (isAll) { //适配全选状态
document.querySelector("#iot_radio_all").checked = true;
}
else {
document.querySelector("#iot_radio_all").checked = false;
}
getTotalAmount();
}
/**
* 计算结算金额
* 遍历productArray，基于数量和选中状态合并计算
*/
function getTotalAmount() {
var totalAmount = 0;
for (var i = 0; i < productArray.length; i++) {
if (productArray[i].checked) {
totalAmount += parseFloat(productArray[i].prize) * parseFloat(productArray[i].count);
}
}
document.querySelector("#iot_total_amount").innerHTML = "￥" + totalAmount;
}
我的页面，通过HTML+CSS来制作的静态网页，在下方的收获地址、联系客服、退出登录实现网页跳转。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>小冉爱购物</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/member.css" />
</head>
<body data-type="member">
<!-- header -->
<div class="iot_header-container">
<p style="text-align: center; font-size: 16px; font-family: 宋体; color: aliceblue;"><strong>小冉爱购物</strong></p>
<br>
<img src="./img/person.png" class="iot_header-icon" />
<div class="iot_header-name">小冉</div>
</div>
<!-- account -->
<div class="iot_account-container">
<div class="iot_account-item">
<div class="iot_account-value">88</div>
<div class="iot_account-name">收藏的店铺</div>
</div>
<div class="iot_account-item">
<div class="iot_account-value">857</div>
<div class="iot_account-name">收藏的商品</div>
</div>
<div class="iot_account-item">
<div class="iot_account-value">66</div>
<div class="iot_account-name">关注的商品</div>
</div>
<div class="iot_account-item">
<div class="iot_account-value">1314</div>
<div class="iot_account-name">足迹</div>
</div>
</div>
<!-- order -->
<div class="iot_order-container">
<div class="iot_order-title">我的订单</div>
<div class="iot_order-list">
<div class="iot_order-item">
<img src="./img/order-1.png" class="iot_order-icon" />
<div class="iot_order-name">待付款</div>
</div>
<div class="iot_order-item">
<img src="./img/order-2.png" class="iot_order-icon" />
<div class="iot_order-name">待收货</div>
</div>
<div class="iot_order-item">
<img src="./img/order-3.png" class="iot_order-icon" />
<div class="iot_order-name">退款/退货</div>
</div>
<div class="iot_order-item">
<img src="./img/order-4.png" class="iot_order-icon" />
<div class="iot_order-name">全部订单</div>
</div>
</div>
</div>
<!-- menu -->
<div class="iot_menu-container">
<div class="iot_menu-item">
<a href="site.html">
<div class="iot_menu-name">收货地址</div>
</a>
<img src="./img/menu-go.png" class="iot_menu-go" />
</div>
<div class="iot_menu-item">
<a href="phone.html">
<div class="iot_menu-name">联系客服</div>
</a>
<img src="./img/menu-go.png" class="iot_menu-go" />
</div>
<div class="iot_menu-item">
<a href="login.html">
<div class="iot_menu-name">退出登录</div>
</a>
<img src="./img/menu-go.png" class="iot_menu-go" />
</div>
</div>
<!-- tabbar -->
<div class="iot_tabbar_container">
<div id="iot_tabbar_item_1" class="iot_tabbar_item" data-url="./index.html">
<img id="iot_tabbar_icon_1" src="./img/tabbar-1.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_1" class="iot_tabbar_name">首页</div>
<div id="iot_tabbar_unread_1" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_2" class="iot_tabbar_item" data-url="./type.html">
<img id="iot_tabbar_icon_2" src="./img/tabbar-2.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_2" class="iot_tabbar_name">分类</div>
<div id="iot_tabbar_unread_2" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_3" class="iot_tabbar_item" data-url="./basket.html">
<img id="iot_tabbar_icon_3" src="./img/tabbar-3.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_3" class="iot_tabbar_name">购物车</div>
<div id="iot_tabbar_unread_3" class="iot_tabbar_unread"></div>
</div>
<div id="iot_tabbar_item_4" class="iot_tabbar_item" data-url="./member.html">
<img id="iot_tabbar_icon_4" src="./img/tabbar-4.png" class="iot_tabbar_icon" />
<div id="iot_tabbar_name_4" class="iot_tabbar_name">我的</div>
<div id="iot_tabbar_unread_4" class="iot_tabbar_unread"></div>
</div>
</div>
</body>
<script src="./js/common.js"></script>
<script src="./js/member.js"></script>
</html>
body {
background-color: #F0F0F0;
}
/* header */
.iot_header-container {
width: 100%;
height: 280px;
background-color: #d81e06;
padding-top: 30px;
}
.iot_header-icon {
width: 80px;
height: 80px;
border-radius: 40px;
border: 5px solid #ffff03;
display: block;
margin: 0px auto;
}
.iot_header-name {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #FFFFFF;
font-weight: bold;
}
/* account */
.iot_account-container {
width: 90%;
margin: -20px auto 12px auto;
background-color: #FFFFFF;
display: flex;
justify-content: space-around;
border-radius: 10px;
}
.iot_account-item {
padding: 15px 0px;
}
.iot_account-value {
line-height: 30px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.iot_account-name {
line-height: 30px;
font-size: 14px;
text-align: center;
}
/* order */
.iot_order-container {
width: 90%;
margin: 0px auto 12px auto;
background-color: #FFFFFF;
border-radius: 10px;
}
.iot_order-title {
line-height: 50px;
font-size: 16px;
padding-left: 20px;
}
.iot_order-list {
display: flex;
justify-content: space-around;
padding: 5px 0px 15px 0px;
}
.iot_order-icon {
display: block;
width: 30px;
height: 30px;
margin: 0px auto;
}
.iot_order-name {
font-size: 14px;
line-height: 30px;
text-align: center;
}
/* menu */
.iot_menu-container {
width: 90%;
margin: 0px auto 12px auto;
background-color: #FFFFFF;
border-radius: 10px;
}
.iot_menu-item {
padding: 20px 20px;
line-height: 16px;
font-size: 16px;
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
color: black;
}
.iot_menu-go {
height: 16px;
}
以上便是这个购物网页的制作！
http://todo.rdapi.cc/shop/index.html
/** 这个是链接**/
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
