<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简易购物车</title>
<link rel="icon" href="img/logo.svg" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body style="background: #f4f4f4">
<div class="main">
<table
class="table table-bordered"
style="text-align: center"
cellspacing="0"
>
<thead>
<caption>
<h1>简易购物车</h1>
</caption>
<tr>
<th>商品名称</th>
<th>数量(件)</th>
<th>单价(元)</th>
<th>运费(元)</th>
<th>合计</th>
<th>删除</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>罗技</td>
<td>2</td>
<td>100.00</td>
<td>5</td>
<td>205元</td>
<td>
<input
class="btn btn-danger"
type="button"
value="删除"
id="del"
/>
</td>
</tr>
<tr>
<td>雷蛇</td>
<td>2</td>
<td>100.00</td>
<td>10</td>
<td>210元</td>
<td>
<input
class="btn btn-danger"
type="button"
value="删除"
id="del"
/>
</td>
</tr>
</tbody>
<tr>
<td>
<div class="form-group">
<label for="product_name">名称</label>
<input type="text" class="form-control" id="product_name" />
</div>
<div class="form-group">
<label for="product_count">数量</label>
<input
type="number"
class="form-control"
id="product_count"
min="0"
/>
</div>
<div class="form-group">
<label for="product_price">单价</label>
<input
type="number"
class="form-control"
id="product_price"
min="0"
/>
</div>
<div class="form-group">
<label for="product_freight">运费</label>
<input
type="number"
class="form-control"
id="product_freight"
min="0"
/>
</div>
<div class="form-group">
<input
class="btn btn-info"
type="submit"
value="确认添加"
style="display: block; width: 80%; margin: 0 auto"
id="add_product"
/>
</div>
</td>
<td colspan="5">
<div class="form-group">
<label for="address">请填写邮寄地址</label>
<div style="display: inline-block; width: 60%; margin: 20px">
<input type="text" class="form-control" id="address" />
</div>
<input
class="btn btn-success"
type="submit"
value="提交订单"
id="submit"
/>
</div>
</td>
</tr>
</table>
<!-- 蒙版 -->
<div class="mask">
<div class="panel panel-default popUps_url">
<div class="panel-heading">
<h3 class="panel-title">请填写送货地址</h3>
<div class="close glyphicon glyphicon-remove"></div>
</div>
<div class="panel-body" style="padding: 40px">
<h4>送货地址确认</h4>
<div class="form-group">
<label for="province">所属省</label>
<div style="display: inline-block; width: 80%; margin: 10px">
<select class="form-control" id="province">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label for="city">所属市</label>
<div style="display: inline-block; width: 80%; margin: 10px">
<select class="form-control" id="city">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label for="county">所属区</label>
<div style="display: inline-block; width: 80%; margin: 10px">
<select class="form-control" id="county">
<option value=""></option>
</select>
</div>
</div>
<div class="form-group">
<label for="town">街 道</label>
<div style="display: inline-block; width: 80%; margin: 10px">
<input type="text" class="form-control" id="town" />
</div>
</div>
<div class="form-group">
<label for="door_num">门牌号</label>
<div style="display: inline-block; width: 80%; margin: 10px">
<input type="text" class="form-control" id="door_num" />
</div>
</div>
<button
type="button"
class="btn btn-info btn-lg btn-block"
id="confirm"
>
确认
</button>
</div>
</div>
<div class="panel panel-default popUps_url">
<div class="panel-heading">
<h3 class="panel-title">确认订单信息</h3>
<div class="close glyphicon glyphicon-remove"></div>
</div>
<div class="panel-body" style="padding: 40px">
<h4 style="font-weight: bold">请仔细核对订单</h4>
<div id="product_info">
<div class="info">
<h5>商品:</h5>
<div id="product_item_name"></div>
</div>
<div class="info">
<h5>运费:</h5>
<div id="product_item_freight"></div>
</div>
<div class="info">
<h5>总计价格:</h5>
<div id="product_item_price"></div>
</div>
<div class="info">
<h5>送货地址:</h5>
<div id="address_info"></div>
</div>
</div>
<h5>请确认以上信息是否准备无误</h5>
<button
type="button"
class="btn btn-info btn-lg btn-block"
id="confirm_info"
>
确认
</button>
</div>
</div>
</div>
</div>
</body>
<script src="js/data.js"></script>
<script src="js/index.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
js数据部分
var data = {
city: [
{
id: 1,
name: "河南省",
city: [
{
id: 01,
name: "漯河",
city: [
{
id: 001,
name: "召陵区",
},
{
id: 002,
name: "开发区",
},
],
},
{
id: 02,
name: "驻马店",
city: [
{
id: 001,
name: "驻马店1区",
},
{
id: 002,
name: "驻马店2区",
},
],
},
],
},
{
id: 2,
name: "河北省",
city: [
{
id: 21,
name: "秦皇岛",
city: [
{
id: 201,
name: "秦皇岛1区",
},
{
id: 202,
name: "秦皇岛2区",
},
],
},
{
id: 22,
name: "唐山",
city: [
{
id: 302,
name: "唐山1区",
},
{
id: 303,
name: "唐山1区",
},
],
},
],
},
],
};
js逻辑部分
(function () {
var address = document.querySelector("#address");
var mask = document.querySelector(".mask");
var panel = document.querySelectorAll(".panel");
var close = document.querySelectorAll(".close");
var tbody = document.querySelector(".tbody");
var submit = document.querySelector("#submit");
var confirm_info = document.querySelector("#confirm_info");
var address_info = document.querySelector("#address_info");
//当地址输入框获取焦点时触发事件
address.onclick = function () {
if (address.value == "") {
mask.style.display = "block";
panel[0].style.display = "block";
}
};
//弹窗关闭按钮被被点击后
close[0].onclick = function () {
mask.style.display = "none";
panel[0].style.display = "none";
};
//提交订单按钮被点击后
submit.onclick = function () {
if (address.value == "") {
} else {
address_info.innerHTML = address.value;
mask.style.display = "block";
panel[0].style.display = "none";
panel[1].style.display = "block";
var product_item_name = document.querySelector("#product_item_name");
var product_item_freight = document.querySelector(
"#product_item_freight"
);
var product_item_price = document.querySelector("#product_item_price");
setData();
}
};
//封装提交订单被点击后
function setData() {
//获取现有tr
var product = document.querySelectorAll(".tbody tr");
var num = 0;
var sum = 0;
for (var i = 0; i < product.length; i++) {
var td = product[i].children;
var name = td[0].innerHTML;
var count = td[1].innerHTML;
var freight = td[3].innerHTML;
var price = td[4].innerHTML;
// console.log(freight);
// console.log(price.slice(0, price.length - 1));
product_item_name.innerHTML += name + "*" + count + " ";
num += Number(freight);
sum += Number(price.slice(0, price.length - 1));
}
product_item_freight.innerHTML += num + "元";
product_item_price.innerHTML += sum + "元";
}
//弹窗关闭按钮被被点击后
close[1].onclick = function () {
mask.style.display = "none";
panel[1].style.display = "none";
location.reload();
};
//
confirm_info.onclick = function () {
mask.style.display = "none";
panel[1].style.display = "none";
alert("恭喜你！购买成功,你的包裹即将打包发货！");
location.reload();
};
//添加区块儿DOM获取
var product_name = document.querySelector("#product_name");
var product_count = document.querySelector("#product_count");
var product_price = document.querySelector("#product_price");
var product_freight = document.querySelector("#product_freight");
var add_product = document.querySelector("#add_product");
//确认添加按钮点击后触发的事件
add_product.onclick = function () {
let sum =
Number(product_count.value) * Number(product_price.value) +
Number(product_freight.value);
let td_list = `<tr><td>${product_name.value}</td>
<td>${product_count.value}</td>
<td>${product_price.value}</td>
<td>${product_freight.value}</td>
<td>${sum}元</td>
<td>
<input class="btn btn-danger" type="button" value="删除" id="del"/>
</td></tr>`;
tbody.innerHTML += td_list;
fun();
};
function fun() {
//点击删除对应的商品
var del_btn = document.querySelectorAll("#del");
// console.log(del_btn);
for (var i = 0; i < del_btn.length; i++) {
del_btn[i].onclick = del;
del_btn[i].index = i;
}
function del() {
this.parentNode.parentNode.remove();
}
}
fun();
})();
//省市区级联
(function () {
//获取选择框
var _province = document.querySelector("#province");
var _city = document.querySelector("#city");
var _county = document.querySelector("#county");
var _town = document.querySelector("#town");
var _door_num = document.querySelector("#door_num");
var _confirm = document.querySelector("#confirm");
var _mask = document.querySelector(".mask");
var _address = document.querySelector("#address");
//获取所有的省的数组
var provinces = data.city;
// console.log(provinces);
//obj每个省对象
provinces.forEach(function (obj) {
_province.innerHTML += `<option>${obj.name}</option>`;
});
//切换省时，市和县都要切换
_province.onchange = function () {
showCitys();
showCounty();
};
//加载市
function showCitys() {
//每次都要重新清空框里的内容
_city.innerHTML = "";
//获取当前所选的省的编码
var code = _province.value;
//根据编码获取对应的省的对象
var province = provinces.find(function (obj) {
return obj.name == code;
});
//获取所有市的数组
var citys = province.city;
//obj:每个市对象
citys.forEach(function (obj) {
_city.innerHTML += `<option>${obj.name}</option>`;
});
}
//发生改变时执行的函数，当改变省、市时，其后的也会改变成对应的地区
_city.onchange = function () {
showCounty();
};
//加载县
function showCounty() {
//每次都要重新清空框里的内容
_county.innerHTML = "";
//获取当前所选的省的编码
var provinceCode = _province.value;
//获取当前所选的省的编码
var cityCode = _city.value;
//根据省编码获取相应的省的对象
var province = provinces.find(function (obj) {
return obj.name == provinceCode;
});
var citys = province.city;
// console.log(citys);
//根据市编码获取相应的市对象
//obj：每一个市对象
var city = citys.find(function (obj) {
return obj.name == cityCode;
});
// console.log(city);
//根据市对象获取区数组
var countys = city.city;
// console.log(countys);
countys.forEach(function (obj) {
_county.innerHTML += `<option>${obj.name}</option>`;
});
}
//确认地址按钮被点击后
_confirm.onclick = function () {
let str =
_province.value +
_city.value +
_county.value +
_town.value +
_door_num.value;
_mask.style.display = "none";
_address.value = str;
};
})();
css部分
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
.main{
width: 1200px;
margin: 50px auto;
}
th{
text-align: center!important;
}
td{
vertical-align: middle!important;
}
.mask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.mask .panel{
margin: 50px auto;
width: 450px;
max-height: 550px;
position: relative;
display: none;
}
.mask .panel .close{
position: absolute;
right: 10px;
top: 10px;
color: red;
}
#product_info{
margin: 20px auto;
}
#product_info .info{
display: flex;
align-items: center;
}
#product_info .info div{
margin-left: 20px;
}下一个boostrap文件引用字体js、css自行添加即可
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
