js事件

开关灯案例：

<div id='d1' class='c1 bg_red bg_green'></div>

　　<button id='d2'>变色</button>

<script>

　　let btnEle =document.getElementById('d2')

　　let divEle=document.getElementById('d1')

　　betEle.onclick=function(){   绑定点击事件

　　//动态的修改div标签的类属性

　　　　divEle.classList.toggle('bg_red')

　　}

</script>

input框获取焦点失去焦点案例

<input type='text' value='老板 你好' id='d1'’>

<script>

　　let iEle=document.getElementById('d1')

//获取焦点事件

　　iEle.onfocus=function(){

//将input框内部值去除

　　iEle.value=''

//点value就是获取 等号赋值就是设置

}

//失去焦点事件

iEle.onblur=function(){

//给input标签重写赋值

iEle.value='你好'

}

</script>

实时展示当前时间：

<input type='text' id='d1' style='display:block;height:50px;width:200px>//input框的长宽设置

<button  id='d2'>开始</button>

<button  id='d3'>结束</button>

<script>

　　//先定义一个全局存储定时器的变量

　　let t=null

　　let inputEle=document.getElementById('d1')

　　let startBenEle=document.getElementById('d2')

　　let endBtnEle=document.getElementById('d3')

//1.访问页面之后 将访问的时间展示到input框中

//2.动态展示当前时间

//3.页面上加两个按钮一个开始一个结束

function showTime(){

　　let currentTime=new Date();

　　inputEle.value=currentTime.toLocaleString()

}

startBtnEle.onclick=function(){

//限制定时器只能开一个

　　if(!t){

　　　　t=setInterval(showTime,1000)//每点击一次就会开设一个定时器，而t只指代最后一个

　　}

}

endBenEle.onclick=function(){

　　clearInterval(t)

//还应该将t重置为空

t=null

}

</script>

省市联动，选择省第二个框自动展示相应的市：

待写

cityEle.innerHTML=''

//oppEle.innerText='请选择'

//oppEle.sctAttribute('selected','selected')

cityEle.innerHTML=ss

//for循环所有的市 渲染到第二个select中

for (let i=0;i<currentCityList.length;i++){

　　let currentCity=currentCityList[i]

//1创建option标签

　　let opEle=document.createElement('option')

//2设置文本

　　opEle.innerText=currentCity

//3设置value

　　opEle.value=currentCity   //<option value='省'>省</option>

//4将创建好的option标签加到第一个select中

　　cityEle.appendChild(opEle)

　　}

}