• 前端事件案例补充

    目录

    定时器示例

    搜索框示例

    省市联动

    定时器示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7. head>
    8. <body>
    9. <input type="text" id="i1">
    10. <button id="b1">开始button>
    11. <button id="b2">结束button>
    12.  
    13. <script>
    14.     var t;
    15.     function showTime() {
    16.         var i1Ele = document.getElementById('i1');
    17.         var time = new Date();
    18.         i1Ele.value = time.toLocaleString();
    19.     }
    20.     showTime();
    21.     var b1Ele = document.getElementById('b1');
    22.     b1Ele.onclick = function (ev) {
    23.         if (!t){
    24.             t = setInterval(showTime,1000)
    25.         }
    26.     };
    27.     var b2Ele = document.getElementById('b2');
    28.     b2Ele.onclick = function (ev) {
    29.        clearInterval(t);
    30.        t = undefined
    31.     };
    32.  
    33. script>
    34. body>
    35. html>

    搜索框示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>搜索框示例title>
    6.  
    7. head>
    8. <body>
    9. <input id="d1" type="text" username="aa" placeholder="请输入关键字" onblur=
    10. "blur1()" onfocus="focus1()">
    11.  
    12. <script>
    13.     function focus1() {
    14.         var inputEle = document.getElementById("d1");
    15.         var placehold=inputEle.getAttribute('placeholder');
    16.         console.log(placehold);
    17.         // if (inputEle.value === "请输入关键字") {
    18.         if (placehold === "请输入关键字") {
    19.             inputEle.value = "";
    20.         }
    21.     }
    22.  
    23.     function blur1() {
    24.         var inputEle = document.getElementById("d1");
    25.         // var val = inputEle.value;
    26.         var val=inputEle.getAttribute('placeholder');
    27.         if (!val.trim()) {
    28.             // inputEle.value = "请输入关键字";
    29.             inputEle.setAttribute('placeholder', '请输入关键字111'); 
    30.             // 如何去修改标签的属性
    31.         }
    32.     }
    33. script>
    34. body>
    35. html>

    省市联动

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="x-ua-compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     <title>select联动title>
    8.  
    9. head>
    10. <body>
    11. <select name="" id="province">
    12.     <option value="">请选择option>
    13.  
    14. select>
    15.  
    16. <select name="" id="city">
    17.     <option value="">请选择option>
    18. select>
    19.  
    20. <script>
    21.     var data = {
    22.         "河北省": ["廊坊", "邯郸", "保定",  "石家庄"],
    23.         "北京": ["朝阳区", "海淀区", "大兴区", "通州区"],
    24.         "河南省": ["郑州", "周口", "信阳", "洛阳"],
    25.         "江苏省": ["南京", "苏州", "徐州", "无锡"],
    26.         "浙江省": ["杭州", "绍兴", "温州", "嘉兴"],
    27.         "上海": ["黄浦区", "普陀区", "闵行区", "浦东新区"],
    28.     };
    29.     var province = document.getElementById('province');
    30.     var city = document.getElementById('city');
    31.     // 1. 要循环data数据，拿到data数据的key值是省作为第一个下拉框的数据
    32.     for (var i in data) {
    33.         // 这里的i值就是data 的key值，其实就是省数据
    34.         // console.log(data[i])
    35.         // 2. 创建option标签，怎么样创建标签
    36.         var option = document.createElement('option');
    37.  
    38.         // 3. 给option标签设置value值和文本数据
    39.         option.value = i;  // 
    40.         option.innerText = i; // 
    41.         // 4. 把option追加到省的select中取
    42.         province.appendChild(option);
    43.     }
    44.  
    45.     // 接下来给省的下拉框绑定事件
    46.     province.onchange = function () {
    47.         // 1. 先拿到当前用户选择的是哪个省的数据
    48.         // var current_province = province.value;
    49.         var current_province = this.value;
    50.  
    51.         // 2. 根据选择的省获取对应的市信息
    52.         var current_city_list = data[current_province]; 
    53.         // ["朝阳区", "海淀区", "大兴", "通州"],
    54.         city.innerText = '';
    55.  
    56.         // 3. 循环的把获取到的所有市列表放到第二个select框去
    57.         for (var i = 0; i < current_city_list.length; i++) {
    58.             var option = document.createElement('option'); 
    59.             // 
    60.  
    61.             // 4. 给city标签设置value值和文本数据
    62.             option.value = current_city_list[i];
    63.             option.innerText = current_city_list[i];
    64.             // 5. 把city追加到省的select中取
    65.             city.appendChild(option);
    66.         }
    67.     }
    68.  
    69. script>
    70. body>
    71. html>
  • 相关阅读:
    【20221114】【每日一题】复原IP地址
    学生适合用哪种台灯？公认好用的学生护眼台灯分享
    刷题之路：1410 - 【基础】数塔的行走路径（递推求解）c++题解
    2023年计划
    R语言实操记录——导出高清图片（矢量图）
    计算机毕业设计node.js+vue好未来团购网系统
    06-Nginx配置详解
    Neo4j：入门基础（二）~ 数据导入Neo4J
    PyTorch 之 Dataset 类入门学习
    mysql中的字段如何选择合适的数据类型呢？
  • 原文地址：https://blog.csdn.net/qq_53842456/article/details/134203046