应用系统定制开发对于手机端商城购物系统的仿写，首先制作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);}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
应用系统定制开发开始设计首页，应用系统定制开发将首页分为搜索栏、、菜单栏以及楼层。
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
```javascriptvar 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; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
再将分类页面分为顶部的搜索栏以及下方的左侧菜单栏、右侧页面。
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
.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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
//分类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"; }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
对于购物车的页面，则是首先完成顶部收货地址，再实现下方购物车情况。
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
.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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
//定义购物车数组（未匹配到接口，因此使用静态数组）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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
我的页面，通过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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
以上便是这个购物网页的制作！
http://todo.rdapi.cc/shop/index.html
/** 这个是链接**/