草庐IT

20220712_第七小组_张红睿_学习笔记

jzhr 2023-03-28 原文

知识点

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_第七小组_张红睿_学习笔记的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  2. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  5. ruby - 我如何学习 ruby​​ 的正则表达式? - 2

    如何学习ruby​​的正则表达式?(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具,因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1881231/

  6. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  7. 机器学习——时间序列ARIMA模型(四):自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式:ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵,分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型,求出其滞

  8. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

  9. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  10. ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景,很容易学习,因为它们都有相同的C结构,我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好,Python对我来说比Ruby更容易学。然后从去年开始,我一直在尝试学习Ruby,然后是Rails,我承认,直到现在我还是学不会,讽刺的是那些打着简单易学的烙印,但是对于我这样一个老练的程序员来说,我只是无法将它

随机推荐