javascript DOM练习-优快云博客

本文深入探讨了前端开发中的三个核心技巧：定时器的使用与清除、输入框焦点的管理和select元素的联动更新。通过具体代码示例，详细解析了如何在网页中实现这些功能，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、定时器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" id="start" value="开始">
<input type="button" id="end" value="结束">
<script>
    /*
        定时器
        知识点：清除定时器后，定时器的值不会改变
     */
    var timeResh;
    function foo() {
        // 获取当前时间，并转换成字符串时间
        var now = new Date();
        nowStr = now.toLocaleString();
        // 获取标签，并填入当前时间
        var i1Ele = document.getElementById("i1");
        i1Ele.value = nowStr;
    }
    // 获取star button 并设置监听
    var starEle = document.getElementById("start");
    starEle.onclick = function () {
        foo();
        // timeResh定时器， 没赋值默认为undefined ,再次点击start 按钮时，因为 timeResh不等于undefined所以，不会生成新的定时器
        if(timeResh===undefined){
            // 每1000毫秒，刷新一次
            timeResh = setInterval(foo, 1000);
        }

    }

    var endEle = document.getElementById("end");
    endEle.onclick=function () {
        // 清除定时器后，值不会发送变化，把值重新设置成undefined
        clearInterval(timeResh);
        timeResh = undefined;
    }

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

二、焦点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" value="俄罗斯套娃">
<input type="button" value="搜索">
<script>
    /*
        获取焦点：onfocus
        失去焦点：onblur
     */
    var i1Ele = document.getElementById("i1");
    // 有焦点时，设置值为空
    i1Ele.onfocus = function () {
        i1Ele.value = ""
    }
    var i2Ele = document.getElementById("i2");
    i1Ele.onblur = function () {
        // 当input的内容为空时
        if(!i1Ele.value.trim()) {
            i1Ele.value = "俄罗斯套娃";
        }
    }
</script>
</body>
</html>

三、select联动

onchange 域的内容被改变

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="f1">
    <option value="0">--请选择--</option>
    <option value="1">江苏</option>
    <option value="2">北京</option>
</select>

<select name="" id="f2">
    
</select>

<script>
    /*
        思路：
            1、选择城市，获取数据
            2、创建option标签
            3、添加数据到option
            4、将option标签加到select标签中
            5、重新选择时，要清空之前添加的标签
     */
    var data = {1: ["徐州", "常州", "无锡"], 2: ["东城", "沙河"]}
    var f1Ele = document.getElementById("f1");
    f1Ele.onchange = function () {
        var area = data[this.value];

        var f2Ele = document.getElementById("f2");
        // 清空标签
        f2Ele.innerHTML="";
        for (var i = 0; i < area.length; i++){
            var optEle = document.createElement("option");
            optEle.innerText = area[i];
            f2Ele.appendChild(optEle);
        }
    }
</script>

</body>
</html>