首页 > 编程语言 >【13.0】前端基础JavaScript之JS事件案例

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

时间：2023-07-06 10:00:53浏览次数：58  
标签：function -- JavaScript JS getElementById let input document 13.0

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

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

相关文章

  • 使用parcel搭建three.js开发环境
    目录1、安装2、项目设置3、打包脚本为了方便模块化进行three.js项目的学习和开发，又不用学习太多的配置，增加学习成本，所以就使用Parcel这个web应用打包工具。Parcel官网：https://v2.parceljs.cn/getting-started/webapp/1、安装​在开始之前，您需要安装Node和npm，并为您......
  • js 异步 任务 题目解析（chatgpt bug了？）
    最近遇到一道题如下，求输出结果感觉还是蛮有意思的，找chatgpt做了一下我是题asyncfunctionasync1(){console.log('1');awaitasync2();console.log('2');}asyncfunctionasync2(){console.log('3');}console.log('4')setTimeout(func......
  • JavaScript（七）ES6
    Node环境安装nvm、npm、nrmnvm：管理多个版本的node环境，使用nvm安装nodejsnpm：npm是node的包管理工具，使用nvm安装node后，就可以使用npm命令nrm：管理npm的镜像源，使用npm命令安装Babel转码器可以将es6代码转成es5代码。从而可以在老版本浏览器执行在项目根目录下安装np......
  • JavaScript（六）事件处理
    常见的HTML事件常见HTML事件事件描述onchangeHTML元素已被改变onclick用户点击了HTML元素onmouseover用户把鼠标移动到HTML元素上onmouseout用户把鼠标移开HTML元素onkeydown用户按下键盘按键onload浏览器已经完成页面加载事件处理方式......
  • JavaScript（五）浏览器操作
    浏览器对象windowwindow对象不但充当全局作用域，而且表示浏览器窗口。window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。navigator：navigator对象表示浏览器的信息，最常用的属......
  • 【12.0】前端基础JavaScript之DOM
    【12.0】前端基础JavaScript之DOM【一】什么是DOM/BOM截至目前为止，我们虽然已经学会了js语法，但是还是没办法跟浏览器进行交互BOM(BrowserObjectModel)浏览器对象模型js代码操作浏览器DOM(DocunmentObjectModel)文档对象模型js代码操作标签【二】Window......
  • js如何动态清除form表单中input款下的错误信息
    form表单<formaction=""method="post"novalidateid="myform">{%csrf_token%}{%forforminform_obj%}<divclass="form-group"><labelfor="{{form.i......
  • 前端文件流下载--mockjs污染全局问题
    参考文章https://blog.csdn.net/daotian2016/article/details/123670179 项目场景：项目场景：VUE工程，做了一个代码自动生成可以导出zip的功能。问题描述导出的zip文件打开提示“不可预料的压缩文件末端”，文件打不开。 exportfunctiondownLoadZip(str,filename){ varurl=......
  • API6中JS UI实现富文本组件居右显示
    ​ 【关键字】RichText、富文本组件、API6、JS UI、居右显示 【关键代码如下】index.hml<divclass="container"><divclass="top"><richtext@start="onLoadStart"@complete="onLoadEnd"class="rich">{{con......
  • VUE 2项目使用vue-json-excel导出数据
    记录一下后端返回的json数据转成excel导出这里外面使用的是vue-json-excel1.安装包npminstallvue-json-excel2.组件中使用<download-excelclass="btnbtn-default":data="json_data":fields="json_fields"worksheet="MyWorksheet"name=&......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99