【18.0】JavaScript---事件案例

最新推荐文章于 2024-09-14 18:52:56 发布

qhahaha~

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量980

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_83569627/article/details/139753449

版权

【18.0】JavaScript—事件案例

【一】开关灯事件

【介绍】设置一个按钮，按下按钮触发事件，来回切换圆形图片的颜色
【分析】
- 图片设置：设置成圆形的图片
- 背景颜色：设置红绿两个颜色，来回切换
- 按钮设置：点击按钮触发事件，事件为切换背景颜色

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关灯事件</title>
    <style>
    /*设置图片*/
    .c1{
        height:200px;
        width:200px;
        border-radius: 50%;
    }
    .bd_green{
        background-color: green;
    }
    .bd_red{
            background-color: red;
        }
    </style>
</head>
<body>
 <!--设置背景图片-->
<div id="bg_picture"  class="c1 bd_green bd_red">

</div>
<!--按钮-->
<button id="button1">点击按钮变色</button>

<!--配置变色事件-->
<script>
    //找到按钮标签
    let btnEle=document.getElementById("button1")
    //找到图片标签
    let picEle=document.getElementById("bg_picture")
    //为按钮绑定图片进行触发
    btnEle.onclick=function(){
        //动态修改图片属性，toggle有则删除，无则添加（实现切换)
        picEle.classList.toggle("bd_red")
    }
</script>

</body>
</html>

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

【焦点概念】
- 获得和失去焦点是鼠标行为，现在有一个输入框，当鼠标放在输入框点击的时候，就是在获得焦点，当鼠标移走到其他输入框或区域，无法编辑，就是失去焦点
【分析】
- 获得焦点：是在收集信息，我们需要将收集的信息储存起来
- 失去焦点：无法收集到用户的信息，可以给一个默认值
【效果】
- 如果点击输入框输入内容没异常
- 如果点击输入框并且没输入鼠标移走会显示我们提前准备的默认内容

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>
    <!--定义输入框-->
<input type="text" value="您的姓名" id="d1">

<script>
    //获得输入框标签
    let inpEle=document.getElementById('d1');
    //将输入框标签变成 获得焦点事件
    inpEle.onfocus=function(){
        inpEle.value="";
    }
    //将输入框变成 失去焦点事件
    inpEle.onblur=function(){
        inpEle.value="没输入";
    }
</script>

</body>
</html>

【三】实时展示当前时间

【1.0】基础版

【分析】
- 设置一个框框
- 将时间事件绑定到框中，触发后自动将时间填入框中
- 【问题】只能展示打开这一刻的时间

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间事件</title>
</head>
<body>
    <!--定义输入框-->
<input type="text" id="d1">

<script>
    //获得输入框标签
    let inpEle=document.getElementById('d1');
    //设置自动填充时间功能
    (function showtime(){
        //找到当前时间
        let currentTime=new Date()
        //填入到框里
        inpEle.value=currentTime.toString();
    })()

</script>

</body>
</html>

【2.0】动态访问时间

【分析】通过时间计时器，设置动态的触发事件，可以设置每个一秒就触发函数，更新时间

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间事件</title>
</head>
<body>
    <!--定义输入框-->
<input type="text" id="d1">

<script>
    //获得输入框标签
    let inpEle=document.getElementById('d1');
    //设置自动填充时间功能
    function showtime(){
        //找到当前时间
        let currentTime=new Date()
        //填入到框里
        inpEle.value=currentTime.toString();
    }
    //增加触发器
    setInterval(showtime,1000)
</script>

</body>
</html>

【3.0】改善版

【分析】
- 上述的代码只能一直运行，不能结束，自动结束的就是上节课，进行嵌套函数，多少秒后自动关闭
- 我们现在设置两个按钮，一个控制时间开始更新，另一个控制将计时器关闭

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间事件</title>
</head>
<body>
    <!--定义输入框-->
<input type="text" id="d1">
    <!--设置两个按钮，一个可以开始，一个控制结束-->
<button id="b1">点我开始时间</button>
<button id="b2">点我结束时间</button>

<script>
    //定义一个量 用于储存定时器
    let t=null

    //获得输入框标签
    let inpEle=document.getElementById('d1');
    //获得两个按钮的标签
    let startEle=document.getElementById('b1');
    let endEle=document.getElementById('b2');

    //设置自动填充时间功能
    function showtime(){
        //找到当前时间
        let currentTime=new Date()
        //填入到框里
        inpEle.value=currentTime.toString();
    }
    //增加触发器,并绑定成点击触发事件，开始计时器
    startEle.onclick=function(){
        //如果t是空，说明计时器没工作，所以开始
        if(!t){
        t=setInterval(showtime,1000)
    }}
    //点击触发关闭事件,关闭计时器
    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="d1">
    <option value="" selected disabled>----请选择省份----</option>
</select>
<select name="" id="d2"></select>

<script>
    //省份数据
    data={
        "河北省": ["廊坊", "邯郸", "保定"],
        "北京": ["朝阳区", "海淀区", "遵化市"],
        "山东": ["威海市", "烟台市"],
    };
    //拿到两个框对象
    let proEle=document.getElementById('d1');
    let cityEle=document.getElementById('d2');

    //for循环遍历数据，对第一个省份框进行操作
    for(key in data){
        //遍历的是省份的名字，将遍历的结果做成选项，添加到第一个框
        //创建option标签
        let opEle=document.createElement('option')
        //给option标签设置属性，和属性值
        opEle.innerText=key
        opEle.value = key
        //放入到第一个框
        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>