20220712_第七小組_張紅睿_學習筆記

知識點 JavaScript部分函數 Array： concat()：連接兩個數組。 join()：設置分隔符連接數組成一個字元串。 pop()：刪除最後一個元素。 sort()：排序 Global： isNaN()：判斷一個值是不是數字。 parseInt()：轉換成整數。 parseFloat( ...

知識點

JavaScript部分函數

Array：

concat()：連接兩個數組。
join()：設置分隔符連接數組成一個字元串。
pop()：刪除最後一個元素。
sort()：排序

Global：

isNaN()：判斷一個值是不是數字。
parseInt()：轉換成整數。
parseFloat()：轉換成浮點數。
number()：轉換成數值對象。
string()：轉換成字元串。

String：

charAt():取出指定位置的字元
indexOf():判斷指定的字元是否生效、如果已存在返回下標
lastIndexOf('a'):從後往前找
replace('a', 'b'):替換字元串
split('-'):根據-去拆分字元串，得到一個數組
subString(1, 6):字元串截取

Math：

ceil()向上取整
floor()z向下取整
round()四捨五入
random()隨機，生成一個0~1的隨機數

JS 主要事件

onclick：滑鼠點擊事件

ondblclick：滑鼠雙擊事件

onblur：失去焦點（一般作用與文本框上）

onfocus：獲得焦點

onchange：元素內容改變事件

onload：載入事件

實踐

實現三元聯動的省市區選擇功能。

源代碼

Html：

點擊查看代碼

<!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="stylesheet" href="../css/work.css" type="text/css">
</head>
<body>
    <div>
        <select id="province" onchange="changeProvince()">
            <option value="">---請選擇省---</option>
            <option value="JiLin">吉林省</option>
            <option value="LiaoNing">遼寧省</option>
            <option value="HeiLongJiang">黑龍江省</option>
        </select>
        <select id="city" onchange="changeCity()">
            <option value="">---請選擇市---</option>
        </select>
        <select id="district">
            <option value="">---請選擇區---</option>
        </select>
    </div>


    <script type="text/javascript" src="../js/work.js"></script>
</body>
</html>

CSS：

點擊查看代碼

div{
    width: 700px;
    margin: 0 auto;
}

select{
    width: 200px;
    height: 50px;
    background-color: lightskyblue;
}

select, option{
    font-size: 20px;
    text-align: center;
}

option{
    background-color: lightcoral;
}

JavaScript：

點擊查看代碼

let defaultCityHtml = '';
let defaultDistrictHtml = '';

let province_JiLin_E = ['ChangChun', 'JiLin', 'SiPing', 'LiaoYuan', 'TongHua', 'BaiShan', 'SongYuan', 'BaiCheng', 'YanBian'];
let province_JiLin_C = ['長春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊北韓族自治州'];
let province_LiaoNing_E = ['ShenYang', 'DaLian', 'AnShan', 'FuShun', 'BenXi', 'DanDong', 'JinZhou', 'YingKou', 'FuXin', 'LiaoYang', 'PanJin', 'TieLing', 'ChaoYang', 'HuLuDao'];
let province_LiaoNing_C = ['沈陽市', '大連市', '鞍山市', '撫順市', '本溪市', '丹東市', '錦州市', '營口市', '阜新市', '遼陽市', '盤錦市', '鐵嶺市', '朝陽市', '葫蘆島市'];
let province_HeiLongJiang_E = ['HaErBin', 'QiQiHaEr', 'JiXi', 'HeGang', 'ShuangYaShan', 'DaQing', 'YiChun', 'JiaMuSi', 'QiTaiHe', 'MuDanJiang', 'HeiHe', 'SuiHua', 'DaXingAnLing'];
let province_HeiLongJiang_C = ['哈爾濱市', '齊齊哈爾市', '雞西市', '鶴崗市', '雙鴨山市', '大慶市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺市'];

//吉林省市 區
let city_ChangChun_C = ['南關區', '寬城區', '朝陽區', '二道區', '綠園區', '雙陽區', '九台區'];
let city_JiLin_C = ['昌邑區', '龍潭區', '船營區', '豐滿區'];
let city_SiPing_C = ['鐵西區', '鐵東區'];
let city_LiaoYuan_C = ['龍山區', '西安區'];
let city_TongHua_C = ['東昌區', '二道江區'];
let city_BaiShan_C = ['渾江區', '江源區'];
let city_SongYuan_C = ['寧江區'];
let city_BaiCheng_C = ['洮北區'];
let city_YanBian_C = ['延吉市', '圖們市', '敦化市', '琿春市', '龍井市', '和龍市', '汪清縣', '安圖縣'];

//遼寧省市 區
let city_ShenYang_C = ['和平區', '沈河區', '大東區', '皇姑區', '鐵西區', '蘇家屯區', '渾南區', '沈北新區', '於洪區', '遼中區'];
let city_DaLian_C = ['中山區', '西崗區', '沙河口區', '甘井子區', '旅順口區', '金州區', '普蘭店區'];
let city_AnShan_C = ['鐵東區', '鐵西區', '立山區', '千山區'];
let city_FuShun_C = ['新撫區', '望花區', '順城區'];
let city_BenXi_C = ['平山區', '溪湖區', '明山區', '南芬區'];
let city_DanDong_C = ['元寶區', '振興區', '振安區'];
let city_JinZhou_C = ['古塔區', '凌河區', '太和區'];
let city_YingKou_C = ['站前區', '西市區', '鮁魚圈區', '老邊區'];
let city_FuXin_C = ['海州區', '新邱區', '太平區', '清河門區', '細河區'];
let city_LiaoYang_C = ['白塔區', '文聖區', '巨集偉區', '弓長嶺區', '太子河區'];
let city_PanJin_C = ['雙檯子區', '興隆台區', '大窪區'];
let city_TieLing_C = ['銀州區', '清河區'];
let city_ChaoYang_C = ['雙塔區', '龍城區'   ];
let city_HuLuDao_C = ['連山區', '龍港區', '南票區'];

//黑龍江省市 區
let city_HaErBin_C = ['道里區', '南崗區', '道外區', '平房區', '松北區', '香坊區', '呼蘭區', '阿城區', '雙城區'];
let city_QiQiHaEr_C = ['龍沙區', '建華區', '鐵鋒區', '昂昂溪區', '富拉爾基區', '碾子山區', '梅裡斯達斡爾族區'];
let city_JiXi_C = ['雞冠區', '恆山區', '滴道區', '梨樹區', '城子河區', '麻山區'];
let city_HeGang_C = ['向陽區', '工農區', '南山區', '興安區', '東山區', '興山區'];
let city_ShuangYaShan_C = ['尖山區', '嶺東區', '四方台區', '寶山區'];
let city_DaQing_C = ['薩爾圖區', '龍鳳區', '讓胡路區', '紅崗區', '大同區'];
let city_YiChun_C = ['伊美區', '烏翠區', '友好區', '金林區'];
let city_JiaMuSi_C = ['向陽區', '前進區', '東風區', '郊區'];
let city_QiTaiHe_C = ['新興區', '桃山區', '茄子河區'];
let city_MuDanJiang_C = ['東安區', '陽明區', '愛民區', '西安區'];
let city_HeiHe_C = ['愛輝區'];
let city_SuiHua_C = ['北林區'];
let city_DaXingAnLing_C = ['加格達奇區', '松嶺區', '新林區', '呼中區', '漠河市', '呼瑪縣', '塔河縣'];



function changeProvince(){
    let province = document.querySelector("#province").value;
    let city = document.querySelector("#city");
    let district = document.querySelector("#district");

    defaultCityHtml == '' 
                    ? (defaultCityHtml = city.innerHTML)
                    : (city.innerHTML = defaultCityHtml);

    defaultDistrictHtml == ''
                    ? (defaultDistrictHtml = district.innerHTML)
                    : (district.innerHTML = defaultDistrictHtml);
    
    if (province == "JiLin") {
        for (let e = 0, c = 0; e < province_JiLin_E.length && c < province_JiLin_C.length; e++, c++){
            city.innerHTML += '<option value="' + province_JiLin_E[e] + '">' + province_JiLin_C[c] + '</option>'
        }
    }else if (province == "LiaoNing") {
        for (let e = 0, c = 0; e < province_LiaoNing_E.length && c < province_LiaoNing_C.length; e++, c++){
            city.innerHTML += '<option value="' + province_LiaoNing_E[e] + '">' + province_LiaoNing_C[c] + '</option>'
        }
    }else if (province == "HeiLongJiang"){
        for (let e = 0, c = 0; e < province_HeiLongJiang_E.length && c < province_HeiLongJiang_C.length; e++, c++){
            city.innerHTML += '<option value="' + province_HeiLongJiang_E[e] + '">' + province_HeiLongJiang_C[c] + '</option>'
        }
    }
}

function changeCity(){
    let province = document.querySelector("#province").value;
    let city = document.querySelector("#city");
    let district = document.querySelector("#district");

    defaultDistrictHtml == '' 
                    ? (defaultDistrictHtml = district.innerHTML)
                    : (district.innerHTML = defaultDistrictHtml);

    switch (city.value) {

        // 吉林
        case "ChangChun":
            for (value of city_ChangChun_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "JiLin":
            for (value of city_JiLin_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "SiPing":
            for (value of city_SiPing_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "LiaoYuan":
            for (value of city_LiaoYuan_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "TongHua":
            for (value of city_TongHua_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "BaiShan":
            for (value of city_BaiShan_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "SongYuan":
            for (value of city_SongYuan_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "BaiCheng":
            for (value of city_BaiCheng_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "YanBian":
            for (value of city_YanBian_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;

        // 遼寧
        case "ShenYang":
            for (value of city_ShenYang_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "DaLian":
            for (value of city_DaLian_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "AnShan":
            for (value of city_AnShan_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "FuShun":
            for (value of city_FuShun_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "BenXi":
            for (value of city_BenXi_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "DanDong":
            for (value of city_DanDong_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "JinZhou":
            for (value of city_JinZhou_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "YingKou":
            for (value of city_YingKou_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "FuXin":
            for (value of city_FuXin_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "LiaoYang":
            for (value of city_LiaoYang_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "PanJin":
            for (value of city_PanJin_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "TieLing":
            for (value of city_TieLing_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "ChaoYang":
            for (value of city_ChaoYang_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "HuLuDao":
            for (value of city_HuLuDao_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        

        // 黑龍江 
        case "HaErBin":
            for (value of city_HaErBin_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "QiQiHaEr":
            for (value of city_QiQiHaEr_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "JiXi":
            for (value of city_JiXi_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "HeGang":
            for (value of city_HeGang_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "ShuangYaShan":
            for (value of city_ShuangYaShan_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "DaQing":
            for (value of city_DaQing_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "YiChun":
            for (value of city_YiChun_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "JiaMuSi":
            for (value of city_JiaMuSi_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "QiTaiHe":
            for (value of city_QiTaiHe_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "MuDanJiang":
            for (value of city_MuDanJiang_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "HeiHe":
            for (value of city_HeiHe_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "SuiHua":
            for (value of city_SuiHua_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
        case "DaXingAnLing":
            for (value of city_DaXingAnLing_C) {
                district.innerHTML += '<option value="' + value + '"> ' + value + '</option>';
            }
            break;
    
        default:
            break;
    }
}

20220712_第七小組_張紅睿_學習筆記

知識點

JavaScript部分函數

JS 主要事件

實踐

源代碼

Html：

CSS：

JavaScript：

效果截圖：