一、介紹
網(wǎng)購大家應(yīng)該再熟悉不過，網(wǎng)購中有個很難讓人忽略的功能就是地址管理，接下來就讓我們通過完善代碼來探索下地址管理中常用功能的實現(xiàn)吧～
本題需要在已提供的基礎(chǔ)項目中使用 JS 知識完善代碼，最終實現(xiàn)需求中的具體功能。
二、準備
開始答題前，需要先打開本題的項目代碼文件夾，目錄結(jié)構(gòu)如下：
├── effect.gif
├── index.html
├── css
├── images
└── js
├── data.js
└── index.js
其中：
effect.gif 是最終實現(xiàn)的效果圖。
index.html 是主頁面。
css 是樣式文件夾。
images 是圖片文件夾。
js/data.js 是省市區(qū)列表數(shù)據(jù)。
js/index.js 是需要補充代碼的 js 文件。
在瀏覽器中預(yù)覽 index.html 頁面，顯示如下所示：
三、目標
請在 js/index.js 文件中補全代碼，最終實現(xiàn)以下需求：
- 實現(xiàn)省市二級聯(lián)動功能。
- 頁面加載后省份下拉列表數(shù)據(jù)正常渲染。
- 在省份列表中選取某個數(shù)據(jù)后，對應(yīng)的市區(qū)數(shù)據(jù)會渲染在其右側(cè)的市區(qū)列表中。效果如下：
- 實現(xiàn)對提交的表單信息的驗證功能。
- 填寫表單信息，其中地址、聯(lián)系人和手機號為必填項，有一項為空則點擊保存按鈕會彈出提示窗，點擊提示窗周圍的半透明蒙層后，該窗口會關(guān)閉。效果如下：
- 實現(xiàn)選擇標簽顯示激活樣式功能。
- 點擊標簽列表中的某個標簽（例如：公司），該標簽顯示激活樣式（即 .active**），其他未選擇標簽顯示默認樣式**。效果如下：
- 點擊標簽列表中的某個標簽（例如：公司），該標簽顯示激活樣式（即 .active**），其他未選擇標簽顯示默認樣式**。效果如下：
- 實現(xiàn)新增地址被正確渲染功能。
- 點擊保存按鈕，表單數(shù)據(jù)將以列表的形式顯示在原有數(shù)據(jù)的上方，即整個地址列表的首位。效果如下：
- 點擊保存按鈕，表單數(shù)據(jù)將以列表的形式顯示在原有數(shù)據(jù)的上方，即整個地址列表的首位。效果如下：
- 表單數(shù)據(jù)在地址列表中顯示時，對應(yīng)的標簽有其不同的樣式，具體如下：
- 家：.home。
- 公司：.company。
- 學校：.school。
完成后的效果見文件夾下面的 gif 圖，圖片名稱為 effect.gif（提示：可以通過 VS Code 或者瀏覽器預(yù)覽 gif 圖片）。
規(guī)定
四、代碼
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新增地址</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div id="app">
<!-- 帶返回按鈕的頭部 -->
<div class="header">
<img class="back-btn" src="images/arrow.png" onclick="back()" />
<span id="main_title">新建收貨地址</span>
<span class="blank"></span>
</div>
<!-- 地址、標簽編輯區(qū) -->
<ul class="address">
<li>
<i></i>
<span class="left">省市</span>
<div class="right">
<select
class="province"
name="province"
id="param_province"
onchange="provincechange()"
>
<option>請選擇省份</option>
</select>
<select class="city" name="city" id="param_city">
<option>請選擇城市</option>
</select>
</div>
</li>
<li>
<i>*</i>
<span class="left">地址</span>
<input
type="text"
placeholder="填寫詳細地址，例：XX 小區(qū) 1 幢 101"
id="param_address"
/>
</li>
<li class="mark">
<i></i>
<span class="left">標簽</span>
<a class="active">家</a>
<a>公司</a>
<a>學校</a>
<input type="hidden" id="param_mark" value="0" />
</li>
</ul>
<!-- 聯(lián)系人信息編輯及表單提交區(qū) -->
<ul class="user-info">
<li>
<i>*</i>
<span class="left">聯(lián)系人</span>
<input type="text" placeholder="收貨人姓名" id="param_name" />
</li>
<li>
<i>*</i>
<span class="left">手機號</span>
<input type="text" placeholder="收貨人手機號碼" id="param_phone" />
</li>
<li>
<a class="save-btn" onclick="saveInfo()">保存</a>
</li>
</ul>
<!-- 收獲地址列表展示區(qū) -->
<ul class="address-list">
<li>
<div class="show-area">
<label class="school">學校</label>
<span>浙江省杭州市</span>
</div>
<div class="show-address">
<span>倉前街道夢想小鎮(zhèn)天使村</span>
<a><img src="./images/edit.png" /></a>
</div>
<div class="show-info">
<span>張三</span>
<span>18912345678</span>
</div>
</li>
</ul>
<!-- 提示彈窗 -->
<div class="warning-dialog" onclick="this.style.display='none';">
<div class="warning-msg">省市、地址以及聯(lián)系人和手機號不能為空！</div>
</div>
</div>
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
js/data.js
var provinces = [
"請選擇省份",
"北京市",
"上海市",
"天津市",
"重慶市",
"河北省",
"山西省",
"內(nèi)蒙古省",
"遼寧省",
"吉林省",
"黑龍江省",
"江蘇省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山東省",
"河南省",
"湖北省",
"湖南省",
"廣東省",
"廣西省",
"海南省",
"四川省",
"貴州省",
"云南省",
"西藏省",
"陜西省",
"甘肅省",
"寧夏省",
"青海省",
"新疆省",
"香港",
"澳門",
"臺灣省",
];
var citys = [
["請選擇城市"],
[
"東城區(qū)",
"西城區(qū)",
"崇文區(qū)",
"宣武區(qū)",
"朝陽區(qū)",
"豐臺區(qū)",
"石景山區(qū)",
"海淀區(qū)",
"門頭溝區(qū)",
"房山區(qū)",
"通州區(qū)",
"順義區(qū)",
"昌平區(qū)",
"大興區(qū)",
"懷柔區(qū)",
"平谷區(qū)",
"密云縣",
"延慶縣",
],
[
"黃浦區(qū)",
"盧灣區(qū)",
"徐匯區(qū)",
"長寧區(qū)",
"靜安區(qū)",
"普陀區(qū)",
"虹口區(qū)",
"楊浦區(qū)",
"閔行區(qū)",
"寶山區(qū)",
"嘉定區(qū)",
"浦東新區(qū)",
"金山區(qū)",
"松江區(qū)",
"青浦區(qū)",
"南匯區(qū)",
"奉賢區(qū)",
"崇明縣",
],
[
"和平區(qū)",
"河東區(qū)",
"河西區(qū)",
"南開區(qū)",
"河北區(qū)",
"紅橋區(qū)",
"塘沽區(qū)",
"漢沽區(qū)",
"大港區(qū)",
"東麗區(qū)",
"西青區(qū)",
"津南區(qū)",
"北辰區(qū)",
"武清區(qū)",
"寶坻區(qū)",
"寧河縣",
"靜?？h",
"薊縣",
],
[
"萬州區(qū)",
"涪陵區(qū)",
"渝中區(qū)",
"大渡口區(qū)",
"江北區(qū)",
"沙坪壩區(qū)",
"九龍坡區(qū)",
"南岸區(qū)",
"北碚區(qū)",
"萬盛區(qū)",
"雙橋區(qū)",
"渝北區(qū)",
"巴南區(qū)",
"黔江區(qū)",
"長壽區(qū)",
"綦江縣",
"潼南縣",
"銅梁縣",
"大足縣",
"榮昌縣",
"璧山縣",
"梁平縣",
"城口縣",
"豐都縣",
"墊江縣",
"武隆縣",
"忠縣",
"開縣",
"云陽縣",
"奉節(jié)縣",
"巫山縣",
"巫溪縣",
"石柱土家族自治縣",
"秀山土家族苗族自治縣",
"酉陽土家族苗族自治縣",
"彭水苗族土家族自治縣",
"江津市",
"合川市",
"永川市",
"南川市",
],
[
"石家莊市",
"張家口市",
"承德市",
"秦皇島市",
"唐山市",
"廊坊市",
"保定市",
"衡水市",
"滄州市",
"邢臺市",
"邯鄲市",
],
[
"太原市",
"朔州市",
"大同市",
"陽泉市",
"長治市",
"晉城市",
"忻州市",
"晉中市",
"臨汾市",
"呂梁市",
"運城市",
],
[
"呼和浩特市",
"包頭市",
"烏海市",
"赤峰市",
"通遼市",
"呼倫貝爾市",
"鄂爾多斯市",
"烏蘭察布市",
"巴彥淖爾市",
"興安盟",
"錫林郭勒盟",
"阿拉善盟",
],
[
"沈陽市",
"朝陽市",
"阜新市",
"鐵嶺市",
"撫順市",
"本溪市",
"遼陽市",
"鞍山市",
"丹東市",
"大連市",
"營口市",
"盤錦市",
"錦州市",
"葫蘆島市",
],
[
"長春市",
"白城市",
"松原市",
"吉林市",
"四平市",
"遼源市",
"通化市",
"白山市",
"延邊州",
],
[
"哈爾濱市",
"齊齊哈爾市",
"七臺河市",
"黑河市",
"大慶市",
"鶴崗市",
"伊春市",
"佳木斯市",
"雙鴨山市",
"雞西市",
"牡丹江市",
"綏化市",
"大興安嶺地區(qū)",
],
[
"南京市",
"徐州市",
"連云港市",
"宿遷市",
"淮安市",
"鹽城市",
"揚州市",
"泰州市",
"南通市",
"鎮(zhèn)江市",
"常州市",
"無錫市",
"蘇州市",
],
[
"杭州市",
"湖州市",
"嘉興市",
"舟山市",
"寧波市",
"紹興市",
"衢州市",
"金華市",
"臺州市",
"溫州市",
"麗水市",
],
[
"合肥市",
"宿州市",
"淮北市",
"亳州市",
"阜陽市",
"蚌埠市",
"淮南市",
"滁州市",
"馬鞍山市",
"蕪湖市",
"銅陵市",
"安慶市",
"黃山市",
"六安市",
"巢湖市",
"池州市",
"宣城市",
],
[
"福州市",
"南平市",
"莆田市",
"三明市",
"泉州市",
"廈門市",
"漳州市",
"龍巖市",
"寧德市",
],
[
"南昌市",
"九江市",
"景德鎮(zhèn)市",
"鷹潭市",
"新余市",
"萍鄉(xiāng)市",
"贛州市",
"上饒市",
"撫州市",
"宜春市",
"吉安市",
],
[
"濟南市",
"青島市",
"聊城市",
"德州市",
"東營市",
"淄博市",
"濰坊市",
"煙臺市",
"威海市",
"日照市",
"臨沂市",
"棗莊市",
"濟寧市",
"泰安市",
"萊蕪市",
"濱州市",
"菏澤市",
],
[
"鄭州市",
"開封市",
"三門峽市",
"洛陽市",
"焦作市",
"新鄉(xiāng)市",
"鶴壁市",
"安陽市",
"濮陽市",
"商丘市",
"許昌市",
"漯河市",
"平頂山市",
"南陽市",
"信陽市",
"周口市",
"駐馬店市",
"濟源市",
],
[
"武漢市",
"十堰市",
"襄樊市",
"荊門市",
"孝感市",
"黃岡市",
"鄂州市",
"黃石市",
"咸寧市",
"荊州市",
"宜昌市",
"隨州市",
"省直轄縣級行政單位",
"恩施州",
],
[
"長沙市",
"張家界市",
"常德市",
"益陽市",
"岳陽市",
"株洲市",
"湘潭市",
"衡陽市",
"郴州市",
"永州市",
"邵陽市",
"懷化市",
"婁底市",
"湘西州",
],
[
"廣州市",
"深圳市",
"清遠市",
"韶關(guān)市",
"河源市",
"梅州市",
"潮州市",
"汕頭市",
"揭陽市",
"汕尾市",
"惠州市",
"東莞市",
"珠海市",
"中山市",
"江門市",
"佛山市",
"肇慶市",
"云浮市",
"陽江市",
"茂名市",
"湛江市",
],
[
"南寧市",
"桂林市",
"柳州市",
"梧州市",
"貴港市",
"玉林市",
"欽州市",
"北海市",
"防城港市",
"崇左市",
"百色市",
"河池市",
"來賓市",
"賀州市",
],
["?？谑?, "三亞市", "省直轄縣級行政單位"],
[
"成都市",
"廣元市",
"綿陽市",
"德陽市",
"南充市",
"廣安市",
"遂寧市",
"內(nèi)江市",
"樂山市",
"自貢市",
"瀘州市",
"宜賓市",
"攀枝花市",
"巴中市",
"達州市",
"資陽市",
"眉山市",
"雅安市",
"阿壩州",
"甘孜州",
"涼山州",
],
[
"貴陽市",
"六盤水市",
"遵義市",
"安順市",
"畢節(jié)地區(qū)",
"銅仁地區(qū)",
"黔東南州",
"黔南州",
"黔西南州",
],
[
"昆明市",
"曲靖市",
"玉溪市",
"保山市",
"昭通市",
"麗江市",
"思茅市",
"臨滄市",
"德宏州",
"怒江州",
"迪慶州",
"大理州",
"楚雄州",
"紅河州",
"文山州",
"西雙版納州",
],
[
"拉薩市",
"那曲地區(qū)",
"昌都地區(qū)",
"林芝地區(qū)",
"山南地區(qū)",
"日喀則地區(qū)",
"阿里地區(qū)",
],
[
"西安市",
"延安市",
"銅川市",
"渭南市",
"咸陽市",
"寶雞市",
"漢中市",
"榆林市",
"安康市",
"商洛市",
],
[
"蘭州市",
"嘉峪關(guān)市",
"白銀市",
"天水市",
"武威市",
"酒泉市",
"張掖市",
"慶陽市",
"平?jīng)鍪?,
"定西市",
"隴南市",
"臨夏州",
"甘南州",
],
[
"西寧市",
"海東地區(qū)",
"海北州",
"海南州",
"黃南州",
"果洛州",
"玉樹州",
"海西州",
],
["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛(wèi)市"],
[
"烏魯木齊市",
"克拉瑪依市",
"自治區(qū)直轄縣級行政單位",
"喀什地區(qū)",
"阿克蘇地區(qū)",
"和田地區(qū)",
"吐魯番地區(qū)",
"哈密地區(qū)",
"克孜勒蘇柯州",
"博爾塔拉州",
"昌吉州",
"巴音郭楞州",
"伊犁州",
"塔城地區(qū)",
"阿勒泰地區(qū)",
],
["香港"],
["澳門"],
[
"臺北市",
"高雄市",
"臺中市",
"花蓮市",
"基隆市",
"嘉義市",
"金門市",
"連江市",
"苗栗市",
"南投市",
"澎湖市",
"屏東市",
"臺東市",
"臺南市",
"桃園市",
"新竹市",
"宜蘭市",
"云林市",
"彰化市",
],
];
js/index.js文章來源地址http://www.zghlxwxcb.cn/news/detail-477942.html
// 初始化省份下拉列表內(nèi)容
function provinceInit() {
var province = document.getElementById("param_province");
province.length = provinces.length;
for (var i = 0; i < provinces.length; i++) {
province.options[i].text = provinces[i];
province.options[i].value = provinces[i];
}
}
// 選擇省份后對應(yīng)城市下拉列表內(nèi)容渲染
function provincechange() {
// TODO：請補充代碼實現(xiàn)功能
}
/**
* 為標簽綁定單擊事件。
* 事件效果為：
* 1、鼠標點擊該標簽后該標簽樣式顯示 class=active；
* 2、其他已選標簽的 active 樣式被移除；
* 3、將選中的標簽對應(yīng)下標（即選擇器為 “mark a” 選中的標簽對應(yīng)的下標）更新到 id=param_mark 的隱藏的 input 中。
*/
function addClick() {
// TODO：請補充代碼實現(xiàn)功能
}
// 提交信息后，讀取并顯示在頁面中
function saveInfo() {
// TODO：請補充代碼實現(xiàn)功能
}
// 切換新增地址和地址管理的顯隱
function back() {
if (document.getElementById("main_title").innerHTML == "地址管理") {
document.getElementById("main_title").innerHTML = "新增地址";
document.querySelector(".address-list").style.display = "none";
document.querySelector(".address").style.display = "block";
document.querySelector(".user-info").style.display = "block";
}
}
// 頁面加載后的初始化操作
function init() {
// 初始化省份下拉列表內(nèi)容
provinceInit();
// 為標簽綁定單擊事件
addClick();
}
window.onload = function () {
// 初始化
init();
};
css/index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #333333;
}
a {
cursor: pointer;
}
ul {
list-style: none;
}
#app {
width: 414px;
margin: 50px auto;
background: #f5f5f5;
height: 700px;
overflow: hidden;
font-size: 14px;
position: relative;
}
.header {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: white;
}
.address {
background: white;
width: 88%;
border-radius: 8px;
margin: 20px auto;
margin-bottom: 10px;
padding: 8px 18px;
}
.address > li,
.user-info > li {
height: 44px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
li .left {
width: 55px;
}
.address select {
margin-right: 10px;
border: none;
}
.address input,
.user-info input {
padding: 5px;
border: none;
border-bottom: 1px solid #eae6e6;
width: 240px;
height: 36px;
}
.mark > a {
height: 30px;
width: 50px;
line-height: 30px;
text-align: center;
display: inline-block;
border: 1px solid #eae6e6;
margin-right: 10px;
border-radius: 8px;
}
.active {
border: #03a9f4 solid 1px !important;
}
.user-info {
background: white;
width: 88%;
height: 500px;
border-radius: 8px;
margin: 0 auto;
padding: 18px;
}
.save-btn {
display: inline-block;
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
background-color: #03a9f4;
border-radius: 20px;
margin: 0 auto;
margin-top: 50px;
}
.back-btn {
width: 24px;
}
.blank {
width: 24px;
display: inline-block;
height: 100%;
}
.address-list {
background: white;
width: 88%;
border-radius: 8px;
margin: 20px auto;
margin-bottom: 10px;
padding: 18px;
display: none;
}
.address-list > li {
padding-bottom: 8px;
border-bottom: 1px solid #eae6e6;
margin: 18px 0;
}
.show-area {
color: #8a8787;
font-size: 12px;
}
.show-area label {
padding: 1px 5px;
border-radius: 5px;
color: white;
}
.home {
background-color: red;
}
.company {
background-color: #03a9f4;
}
.school {
background-color: orange;
}
.show-address {
display: flex;
align-items: center;
justify-content: space-between;
}
.show-address img {
width: 20px;
}
.show-info {
color: #8a8787;
font-size: 12px;
}
.warning-dialog {
position: absolute;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
left: 0;
bottom: 0;
display: none;
}
.warning-msg {
background-color: white;
width: 80%;
margin: 30% auto;
padding: 30px 10px;
border-radius: 8px;
text-align: center;
}
li i {
color: red;
width: 15px;
height: 100%;
display: flex;
align-items: center;
font-style: normal;
}
images/arrow.png
images/edit.png
文章來源：http://www.zghlxwxcb.cn/news/detail-477942.html
五、完成
js/index.js
// 初始化省份下拉列表內(nèi)容
function provinceInit() {
var province = document.getElementById("param_province");
province.length = provinces.length;
for (var i = 0; i < provinces.length; i++) {
province.options[i].text = provinces[i];
province.options[i].value = provinces[i];
}
}
// 選擇省份后對應(yīng)城市下拉列表內(nèi)容渲染
function provincechange() {
// TODO：請補充代碼實現(xiàn)功能
var province =
document.getElementById("param_province").selectedOptions[0].value;
var index = provinces.findIndex((item) => item == province);
var city = document.getElementById("param_city");
city.length = citys[index].length;
for (var i = 0; i < citys[index].length; i++) {
city.options[i].text = citys[index][i];
city.options[i].value = citys[index][i];
}
}
/**
* 為標簽綁定單擊事件。
* 事件效果為：
* 1、鼠標點擊該標簽后該標簽樣式顯示 class=active；
* 2、其他已選標簽的 active 樣式被移除；
* 3、將選中的標簽對應(yīng)下標（即選擇器為 “mark a” 選中的標簽對應(yīng)的下標）更新到 id=param_mark 的隱藏的 input 中。
*/
function addClick(e) {
// TODO：請補充代碼實現(xiàn)功能
const mark = document.getElementsByClassName("mark")[0];
const lis = document.querySelectorAll(".mark a");
mark.addEventListener("click", function (e) {
if (e.target.nodeName.toLowerCase() == "a") {
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove("active");
}
e.target.classList.add("active");
}
});
}
// 提交信息后，讀取并顯示在頁面中
function saveInfo() {
// TODO：請補充代碼實現(xiàn)功能
//蒙層
const dialog = document.getElementsByClassName("warning-dialog")[0];
const address = document.getElementById("param_address");
const name = document.getElementById("param_name");
const phone = document.getElementById("param_phone");
if (!(address.value && name.value && phone.value)) {
dialog.style.display = "block";
} else {
//獲取地址列表
const address_list = document.getElementsByClassName("address-list")[0];
//獲取省
const province = document.getElementById("param_province").value;
//獲取市
const city = document.getElementById("param_city").value;
//獲取標簽
const marks = document.querySelector(".mark .active").innerHTML;
let tag=''
switch (marks) {
case "家":
tag = "home";
break;
case "學校":
tag = "school";
break;
case "公司":
tag = "company";
break;
}
const temp = `
<div class="show-area">
<label class=${tag}>${marks}</label>
<span>${province + city}</span>
</div>
<div class="show-address">
<span>${address.value}</span>
<a><img src="./images/edit.png" /></a>
</div>
<div class="show-info">
<span>${name.value}</span>
<span>${phone.value}</span>
</div>
`;
const li = document.createElement("li");
li.innerHTML = temp;
address_list.insertBefore(li, address_list.firstElementChild);
back();
}
}
// 切換新增地址和地址管理的顯隱
function back() {
if (document.getElementById("main_title").innerHTML == "地址管理") {
document.getElementById("main_title").innerHTML = "新增地址";
document.querySelector(".address-list").style.display = "none";
document.querySelector(".address").style.display = "block";
document.querySelector(".user-info").style.display = "block";
} else {
document.getElementById("main_title").innerHTML = "地址管理";
document.querySelector(".address-list").style.display = "block";
document.querySelector(".address").style.display = "none";
document.querySelector(".user-info").style.display = "none";
}
}
// 頁面加載后的初始化操作
function init() {
// 初始化省份下拉列表內(nèi)容
provinceInit();
// 為標簽綁定單擊事件
addClick();
}
window.onload = function () {
// 初始化
init();
};
到了這里，關(guān)于javaScript藍橋杯---新增地址的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
