【18.0】JavaScript---事件案例

【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=keyopEle.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/31087.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！