开关灯案例：
<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)
}
}