视频加载失败

JavaScript 事件案例

1817 字
9 分钟
JavaScript 事件案例
2023-07-08
Web 开发
无标签
  1. 1JavaScript 引入
  2. 2JavaScript 初识
  3. 3JavaScript 进阶
  4. 4前端基础阶段性复习
  5. 5JavaScript DOM
  6. 6JavaScript 事件案例本文
  7. 7jQuery 引入
  8. 8jQuery 进阶
  9. 9jQuery 事件
  10. 10jQuery 补充

【13.0】前端基础JavaScript之JS事件案例#

【一】开关灯示例#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>




        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }


        .bd_green {
            background-color: green;
        }


        .bd_red {
            background-color: red;
        }




    </style>
</head>
<body>
<div id="d1" class="c1 bd_green bd_red">


</div>


<button id="d2">变色</button>


<script>
    // 找到 按钮标签
    let btnEle = document.getElementById("d2")


    // 找到需要变色的标签
    let divEle = document.getElementById("d1")


    // 绑定点击事件
    btnEle.onclick = function () {
        // 动态的修改 div 标签的类属性
        divEle.classList.toggle("bd_red")
    }
</script>
</body>
</html>

【二】input框获取/失去焦点#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="去吗?" id="d1">




<script>
    let inputEle = document.getElementById("d1");


    // 获取焦点事件
    inputEle.onfocus = function (){
        // 将input框内部的值去除
        inputEle.value = '';
        // .value : 获取框内的值
        // = ：赋值


    }




    // 失去焦点事件
    inputEle.onblur = function (){
        // 给input框内的标签重写赋值
        inputEle.value = "再说"
    }




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

【三】实时展示当前时间#

【1.0】基础版#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="d1">


<script>
    // 拿到 input 框所在的位置
    let inputEle = document.getElementById("d1");


    // （1） 访问页面之后，将访问的时间显示到input框当中
    function showTime() {
        // 声明当前时间对象
        let currentTime = new Date();
        // 将时间添加到input框内
        inputEle.value = currentTime.toLocaleString();
    }


    // （2）加载完页面触发事件：打印当前时间
    showTime()


</script>


</body>
</html>

【2.0】升级版#

设置触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="d1">


<script>
    // 拿到 input 框所在的位置
    let inputEle = document.getElementById("d1");


    // （1）  访问页面之后，将访问的时间显示到input框当中
    // （2）  动态展示时间
    function showTime() {
        // 声明当前时间对象
        let currentTime = new Date();
        // 将时间添加到input框内
        inputEle.value = currentTime.toLocaleString();
    }


    // 触发事件：打印当前时间
    setInterval(showTime, 100)


</script>


</body>
</html>

【3.0】BUG版#

开启多个定时器时，无法终结每个定时器，只能终结最后定的那个

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->


<!--<input type="text" id="d1">-->


<!--<script>-->
<!--    // 拿到 input 框所在的位置-->
<!--    let inputEle = document.getElementById("d1");-->


<!--    // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!--    function showTime() {-->
<!--        // 声明当前时间对象-->
<!--        let currentTime = new Date();-->
<!--        // 将时间添加到input框内-->
<!--        inputEle.value = currentTime.toLocaleString();-->
<!--    }-->


<!--    // 触发事件：打印当前时间-->
<!--    showTime()-->


<!--</script>-->


<!--</body>-->
<!--</html>-->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>




<script>


    // 定义一个全局标量存储定时器
    let t = null;




    // 拿到 input 框所在的位置
    let inputEle = document.getElementById("d1");


    // 拿到两个按钮所在的标签
    let startEle = document.getElementById("b1");
    let endEle = document.getElementById("b2");




    // （1）  访问页面之后，将访问的时间显示到input框当中
    // （2）  动态展示时间
    // （3）  页面上加两个控制按钮。开始和结束
    function showTime() {
        // 声明当前时间对象
        let currentTime = new Date();
        // 将时间添加到input框内
        inputEle.value = currentTime.toLocaleString();
    }


    startEle.onclick = function () {
        // 触发事件：打印当前时间
        t = setInterval(showTime, 100)
    }


    endEle.onclick = function () {
        clearInterval(t);
    }


</script>


</body>
</html>

结局上述问题

新问题：结束定时器，无法开始

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->


<!--<input type="text" id="d1">-->


<!--<script>-->
<!--    // 拿到 input 框所在的位置-->
<!--    let inputEle = document.getElementById("d1");-->


<!--    // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!--    function showTime() {-->
<!--        // 声明当前时间对象-->
<!--        let currentTime = new Date();-->
<!--        // 将时间添加到input框内-->
<!--        inputEle.value = currentTime.toLocaleString();-->
<!--    }-->


<!--    // 触发事件：打印当前时间-->
<!--    showTime()-->


<!--</script>-->


<!--</body>-->
<!--</html>-->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>




<script>


    // 定义一个全局标量存储定时器
    let t = null;




    // 拿到 input 框所在的位置
    let inputEle = document.getElementById("d1");


    // 拿到两个按钮所在的标签
    let startEle = document.getElementById("b1");
    let endEle = document.getElementById("b2");




    // （1）  访问页面之后，将访问的时间显示到input框当中
    // （2）  动态展示时间
    // （3）  页面上加两个控制按钮。开始和结束
    function showTime() {
        // 声明当前时间对象
        let currentTime = new Date();
        // 将时间添加到input框内
        inputEle.value = currentTime.toLocaleString();
    }


    startEle.onclick = function () {
        if (!t) {
            // 触发事件：打印当前时间
            t = setInterval(showTime, 100);// 每点击一次生成一个定时器，但是t值复制给最后一个定时器
        }
    }


    endEle.onclick = function () {
        clearInterval(t);
    }


</script>


</body>
</html>

【4.0】改善版#

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->


<!--<input type="text" id="d1">-->


<!--<script>-->
<!--    // 拿到 input 框所在的位置-->
<!--    let inputEle = document.getElementById("d1");-->


<!--    // （1） 访问页面之后，将访问的时间显示到input框当中-->
<!--    function showTime() {-->
<!--        // 声明当前时间对象-->
<!--        let currentTime = new Date();-->
<!--        // 将时间添加到input框内-->
<!--        inputEle.value = currentTime.toLocaleString();-->
<!--    }-->


<!--    // 触发事件：打印当前时间-->
<!--    showTime()-->


<!--</script>-->


<!--</body>-->
<!--</html>-->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<input type="text" id="d1" style="display: block;height: 50px;width: 200px;">
<button id="b1">开始计时</button>
<button id="b2">结束计时</button>




<script>


    // 定义一个全局标量存储定时器
    let t = null;




    // 拿到 input 框所在的位置
    let inputEle = document.getElementById("d1");


    // 拿到两个按钮所在的标签
    let startEle = document.getElementById("b1");
    let endEle = document.getElementById("b2");




    // （1）  访问页面之后，将访问的时间显示到input框当中
    // （2）  动态展示时间
    // （3）  页面上加两个控制按钮。开始和结束
    function showTime() {
        // 声明当前时间对象
        let currentTime = new Date();
        // 将时间添加到input框内
        inputEle.value = currentTime.toLocaleString();
    }


    startEle.onclick = function () {
        if (!t) {
            // 触发事件：打印当前时间
            t = setInterval(showTime, 100);// 每点击一次生成一个定时器，但是t值复制给最后一个定时器
        }
    }


    endEle.onclick = function () {
        clearInterval(t);
        // 重置为空
        t = null;
    }


</script>


</body>
</html>

【四】省市联动#

后者会根据前者展示对应的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<select name="" id="s1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="s2"></select>


<script>
    // 模拟数据
    data = {
        "河北省": ["廊坊", "邯郸", "保定"],
        "北京": ["朝阳区", "海淀区", "遵化市"],
        "山东": ["威海市", "烟台市"],
        "台湾": ["台北市", "高雄市"],
        "香港": ["中西区", "东区"],
        "江西": ["南昌市", "九江市"],
        "黑龙江": ["哈尔滨市", "齐齐哈尔市"]
    };




    // 拿到两个select对象
    let proEle = document.getElementById("s1");
    let cityEle = document.getElementById("s2");


    // for 循环 取键
    for (let key in data) {
        // 将省做成一个个标签，添加到第一个select中
        // (1) 创建option标签
        let opEle = document.createElement("option");
        // (2) 设置属性
        opEle.innerText = key
        // (3) 设置值
        opEle.value = key
        // ----->  <option value="省">省</option>


        // (4) 将创建好的标签添加到第一个选项框中
        proEle.appendChild(opEle)
    }




    // 文本域变化事件 --- change 事件
    proEle.onchange = function () {
        // （1） 先获取到用户选择的省份
        let currentPro = proEle.value;
        // (2) 获取对应的市
        let currentCityList = data[currentPro];
        // 清空市中全部的信息
        cityEle.innerHTML = '';
        // 加一个请选择框
        let oppEle = '<option selected disabled>--请选择--</option>'


        cityEle.innerHTML = oppEle


        // (3) for 循环 将所有的市渲染到第二个标签
        for (let i = 0; i < currentCityList.length; i++) {


            let currentCity = currentCityList[i];


            // (1) 创建option标签
            let proEle = document.createElement("option");
            // (2) 设置属性
            proEle.innerText = currentCity
            // (3) 设置值
            proEle.value = currentCity
            // ----->  <option value="省">省</option>


            // (4) 将创建好的标签添加到第一个选项框中
            cityEle.appendChild(proEle)
        }


    }




</script>




</body>
</html>

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！

打赏
JavaScript 事件案例
https://firefly.cuteleaf.cn/posts/frontend/130前端基础javascript之js事件案例/
作者
Dream
发布于
2023-07-08
许可协议
CC BY-NC-SA 4.0
jQuery 引入
JavaScript DOM
相关文章智能推荐
1
C 语言发展史
编程语言了解 C 语言从 BCPL、B 语言到现代标准 C 的发展历程、核心特点与应用领域。
2
C 语言开发环境的安装与配置
编程语言在 Windows、Linux 与 macOS 上安装 C 工具链，配置编辑器，并编译运行第一个 C 程序。
3
C 语言初识：程序运行机制与基本结构
编程语言认识 C 程序从源代码到运行的完整流程，以及基础语法和程序的基本结构。
4
C 语言基础：注释、关键字、变量与数据类型
编程语言学习 C 语言的注释、关键字、标识符、常量、变量和基本数据类型等基础知识。
5
C 语言数据类型
编程语言理解 C 语言的数据类型体系，包括基本类型、整数类型、浮点类型和逻辑类型。
随机文章随机推荐
Profile Image of the Author
Dream
Hello, I'm Dream.
公告
欢迎来到我的博客！爱学习爱进步。
分类
标签
更多
最新动态
站点统计
文章
300
分类
5
标签
26
总字数
640,882
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录
1
【13.0】前端基础JavaScript之JS事件案例
2
【一】开关灯示例
3
【二】input框获取/失去焦点
4
【三】实时展示当前时间
【1.0】基础版
【2.0】升级版
【3.0】BUG版
【4.0】改善版
5
【四】省市联动