前端事件案例补充

定时器示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

搜索框示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
<input id="d1" type="text" username="aa" placeholder="请输入关键字" onblur=
"blur1()" onfocus="focus1()">

<script>
    function focus1() {
        var inputEle = document.getElementById("d1");
        var placehold=inputEle.getAttribute('placeholder');
        console.log(placehold);
        // if (inputEle.value === "请输入关键字") {
        if (placehold === "请输入关键字") {
            inputEle.value = "";
        }
    }

    function blur1() {
        var inputEle = document.getElementById("d1");
        // var val = inputEle.value;
        var val=inputEle.getAttribute('placeholder');
        if (!val.trim()) {
            // inputEle.value = "请输入关键字";
            inputEle.setAttribute('placeholder', '请输入关键字111'); 
            // 如何去修改标签的属性
        }
    }
</script>
</body>
</html>

省市联动

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">
    <title>select联动</title>

</head>
<body>
<select name="" id="province">
    <option value="">请选择</option>

</select>

<select name="" id="city">
    <option value="">请选择</option>
</select>

<script>
    var data = {
        "河北省": ["廊坊", "邯郸", "保定",  "石家庄"],
        "北京": ["朝阳区", "海淀区", "大兴区", "通州区"],
        "河南省": ["郑州", "周口", "信阳", "洛阳"],
        "江苏省": ["南京", "苏州", "徐州", "无锡"],
        "浙江省": ["杭州", "绍兴", "温州", "嘉兴"],
        "上海": ["黄浦区", "普陀区", "闵行区", "浦东新区"],
    };
    var province = document.getElementById('province');
    var city = document.getElementById('city');
    // 1. 要循环data数据，拿到data数据的key值是省作为第一个下拉框的数据
    for (var i in data) {
        // 这里的i值就是data 的key值，其实就是省数据
        // console.log(data[i])
        // 2. 创建option标签，怎么样创建标签
        var option = document.createElement('option');

        // 3. 给option标签设置value值和文本数据
        option.value = i;  // <option value="河北省">河北省</option>
        option.innerText = i; // <option value="北京">北京</option>
        // 4. 把option追加到省的select中取
        province.appendChild(option);
    }

    // 接下来给省的下拉框绑定事件
    province.onchange = function () {
        // 1. 先拿到当前用户选择的是哪个省的数据
        // var current_province = province.value;
        var current_province = this.value;

        // 2. 根据选择的省获取对应的市信息
        var current_city_list = data[current_province]; 
        // ["朝阳区", "海淀区", "大兴", "通州"],
        city.innerText = '';

        // 3. 循环的把获取到的所有市列表放到第二个select框去
        for (var i = 0; i < current_city_list.length; i++) {
            var option = document.createElement('option'); 
            // <option value=""></option>

            // 4. 给city标签设置value值和文本数据
            option.value = current_city_list[i];
            option.innerText = current_city_list[i];
            // 5. 把city追加到省的select中取
            city.appendChild(option);
        }
    }

</script>
</body>
</html>