首页 > 编程语言 >【18.0】JavaScript之JS事件案例

【18.0】JavaScript之JS事件案例

时间：2024-02-27 10:00:24浏览次数：29  
标签：function -- JavaScript JS getElementById let input 18.0 document

【一】开关灯示例

<!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>

标签：function,--,JavaScript,JS,getElementById,let,input,18.0,document
From： https://www.cnblogs.com/dream-ze/p/18036252

相关文章

  • 【17.0】JavaScript之DOM
    【一】什么是DOM/BOM文档对象模型（DocumentObjectModel,简称DOM）浏览器对象模型（BrowserObjectModel,简称BOM）是JavaScript与网页内容及浏览器环境进行交互的两种核心概念。【1】DOM（1）概述文档对象模型（DOM）是一个编程接口，它以树状结构来表示HTML或XML文档。在D......
  • JavaScript 实现JSON 对象数组以某个属性进行分组处理
    JavaScript实现JSON对象数组以某个属性进行分组处理要在JavaScript中对JSON对象数组的某个属性进行分组处理，你可以使用一个对象来存储分组后的结果。下面是一个简单的示例，演示了如何对JSON对象数组中的某个属性进行分组处理：假设我们有一个JSON对象数组，每个对象都有ca......
  • 【10.0】JavaScript之引入
    【一】JavaScript介绍【1】什么是jsjs也是一门编程语言，他可以写后端代码【2】什么是node.js前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)但是并不能完美的实现【3】JavaScript......
  • lua集成cjson
    1,准备编译好的lua 2,lua加到环境变量Path下 3,下载openresty维护的cjson源码GitHub-openresty/lua-cjson:LuaCJSONisafastJSONencoding/parsingmoduleforLua 4,在cjson的CMakeList.txt加一行路径为lua源码的头文件所在文件夹 5,用MinGW编译......
  • Go 100 mistakes - #77: Common JSON-handling mistakes
       ......
  • JavaScript中的包装类型详解
    JavaScript中的包装类型详解在JavaScript中，我们有基本类型和对象类型两种数据类型。基本类型包括String，Number，Boolean，null，undefined和Symbol。然而，当我们需要在这些基本类型上调用方法时，就需要用到JavaScript的包装类型。什么是包装类型？包装类型是JavaScript中的......
  • vue页面上显示package.json中的version
    在Vue项目中，你可以使用process.env来访问构建时注入的环境变量，包括package.json中的某些字段。但是，process.env通常不会直接包含package.json的所有内容。不过，你可以通过构建脚本将version字段注入到环境变量中。以下是如何在Vue项目中获取package.json中的version字段的步骤：在......
  • vue项目npm run build的时候自动更新package.json中的version
    在vue项目最外侧新增一个addVersion.js 脚本，脚本中编写逻辑来解析当前的版本号//addVersion.jsconstfs=require('fs');constpath=require('path');constpackageJsonPath=path.join(__dirname,'package.json');try{//读取package.json......
  • umijs 项目配置问题汇总
    umi配置问题汇总umi或@umijs/max集成tailwindcss正常umi内置了tailwindcss插件，详情可参考官方文档TailwindCSS配置生成器但是由于内置的tailwindcss插件过老，umi官方已不推荐使用内置，建议使用tailwindcss官方的配置。详情可见issue同时，umi官方也不推荐使用p......
  • 如何在Nodejs中切换版本
    Node.js的版本更新很快，有时候我们需要切换到更新的版本，以获取最新的功能和性能改进。Nodejs提供了多种方法来切换版本，下面介绍几种常用的方法：1.使用nvm切换版本NVM（NodeVersionManager）是一个管理Node.js版本的工具，可以让我们轻松地安装、卸载和切换Node.js版本。#安装nvm......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99