地下城做解封任务的网站,wordpress 最值得购买 主题,现在流行的网站开发语言,wordpress时光轴主题【18.0】JavaScript—事件案例
【一】开关灯事件 【介绍】设置一个按钮#xff0c;按下按钮触发事件#xff0c;来回切换圆形图片的颜色 【分析】 图片设置#xff1a;设置成圆形的图片背景颜色#xff1a;设置红绿两个颜色#xff0c;来回切换按钮设置#xff1a;点击…【18.0】JavaScript—事件案例
【一】开关灯事件 【介绍】设置一个按钮按下按钮触发事件来回切换圆形图片的颜色 【分析】 图片设置设置成圆形的图片背景颜色设置红绿两个颜色来回切换按钮设置点击按钮触发事件事件为切换背景颜色 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8title开关灯事件/titlestyle/*设置图片*/.c1{height:200px;width:200px;border-radius: 50%;}.bd_green{background-color: green;}.bd_red{background-color: red;}/style
/head
body!--设置背景图片--
div idbg_picture classc1 bd_green bd_red/div
!--按钮--
button idbutton1点击按钮变色/button!--配置变色事件--
script//找到按钮标签let btnEledocument.getElementById(button1)//找到图片标签let picEledocument.getElementById(bg_picture)//为按钮绑定图片进行触发btnEle.onclickfunction(){//动态修改图片属性toggle有则删除无则添加实现切换)picEle.classList.toggle(bd_red)}
/script/body
/html【二】input框获取/失去焦点 【焦点概念】 获得和失去焦点是鼠标行为现在有一个输入框当鼠标放在输入框点击的时候就是在获得焦点当鼠标移走到其他输入框或区域无法编辑就是失去焦点 【分析】 获得焦点是在收集信息我们需要将收集的信息储存起来失去焦点无法收集到用户的信息可以给一个默认值 【效果】 如果点击输入框输入内容 没异常如果点击输入框并且没输入 鼠标移走会显示我们提前准备的默认内容 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8title焦点事件/title
/head
body!--定义输入框--
input typetext value您的姓名 idd1script//获得输入框标签let inpEledocument.getElementById(d1);//将输入框标签变成 获得焦点事件inpEle.onfocusfunction(){inpEle.value;}//将输入框变成 失去焦点事件inpEle.onblurfunction(){inpEle.value没输入;}
/script/body
/html【三】实时展示当前时间
【1.0】基础版 【分析】 设置一个框框将时间事件绑定到框中触发后自动将时间填入框中【问题】只能展示打开这一刻的时间 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8title时间事件/title
/head
body!--定义输入框--
input typetext idd1script//获得输入框标签let inpEledocument.getElementById(d1);//设置自动填充时间功能(function showtime(){//找到当前时间let currentTimenew Date()//填入到框里inpEle.valuecurrentTime.toString();})()/script/body
/html【2.0】动态访问时间 【分析】通过时间计时器设置动态的触发事件可以设置每个一秒就触发函数更新时间 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8title时间事件/title
/head
body!--定义输入框--
input typetext idd1script//获得输入框标签let inpEledocument.getElementById(d1);//设置自动填充时间功能function showtime(){//找到当前时间let currentTimenew Date()//填入到框里inpEle.valuecurrentTime.toString();}//增加触发器setInterval(showtime,1000)
/script/body
/html【3.0】改善版 【分析】 上述的代码只能一直运行不能结束自动结束的就是上节课进行嵌套函数多少秒后自动关闭我们现在设置两个按钮一个控制时间开始更新另一个控制将计时器关闭 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8title时间事件/title
/head
body!--定义输入框--
input typetext idd1!--设置两个按钮一个可以开始一个控制结束--
button idb1点我开始时间/button
button idb2点我结束时间/buttonscript//定义一个量 用于储存定时器let tnull//获得输入框标签let inpEledocument.getElementById(d1);//获得两个按钮的标签let startEledocument.getElementById(b1);let endEledocument.getElementById(b2);//设置自动填充时间功能function showtime(){//找到当前时间let currentTimenew Date()//填入到框里inpEle.valuecurrentTime.toString();}//增加触发器,并绑定成点击触发事件开始计时器startEle.onclickfunction(){//如果t是空说明计时器没工作所以开始if(!t){tsetInterval(showtime,1000)}}//点击触发关闭事件,关闭计时器endEle.onclickfunction(){clearInterval(t);tnull;}
/script/body
/html【四】省市联动 【问题介绍】 平时的省和市的选择实现我们点击第一个框出现某个省第二个输入框里的内容自动变成其市 【分析】 【界面中】需要定义两个框第一个是省份第二个是城市【数据】先自己写一组数据字典省份为键相应城市列表为值【处理数据】 展示数据的时候需要遍历省和城市将遍历好的数据放入我们的文本框 【代码】 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--设置两个输入框--
select name idd1option value selected disabled----请选择省份----/option
/select
select name idd2/selectscript//省份数据data{河北省: [廊坊, 邯郸, 保定],北京: [朝阳区, 海淀区, 遵化市],山东: [威海市, 烟台市],};//拿到两个框对象let proEledocument.getElementById(d1);let cityEledocument.getElementById(d2);//for循环遍历数据对第一个省份框进行操作for(key in data){//遍历的是省份的名字将遍历的结果做成选项添加到第一个框//创建option标签let opEledocument.createElement(option)//给option标签设置属性和属性值opEle.innerTextkeyopEle.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--请选择--/optioncityEle.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
