长春建站软件界面设计软件
【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>