标签：原生 function iEle 绑定 value js getElementById let document
原生js事件绑定
<script>
<div id="d1" class="c1 bg_green bg_red"></div>
<button id="d2">变色</button>
<script>
let btnEle = document.getElementById('d2')
let divEle = document.getElementById('d1')
btnEle.onclick = function () { // 绑定点击事件
// 动态的修改div标签的类属性
divEle.classList.toggle('bg_red')
}
</script>
<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">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
let t = null
let inputEle = document.getElementById('d1')
let startBtnEle = 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只指代最后一个
}
}
endBtnEle.onclick = function () {
clearInterval(t)
// 还应该将t重置为空
t = null
}
</script>
<body>
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
// 先模拟省市数据
data = {
"安徽省":['合肥','芜湖','马鞍山'],
"江苏省":['南京','徐州','苏州'],
"浙江省":['杭州','义乌','宁波'],
"北京市":['朝阳区','海淀区','昌平区'],
"上海市":['黄浦区','青浦区','杨浦区']
};
// for循环获取省
for (let key in data){
// 将省的信息做成一个个option标签，添加到第一个select框中
// 1.创建option标签
let opEle = document.createElement('option')
// 2.设置文本
opEle.innerText = key
// 3.设置value
opEle.value = key // <option value="省">省</option>
// 4.将创建好的option标签添加到第一个select中
proEle.appendChild(opEle)
}
// 文本域变化事件 change事件
proEle.onchange = function () {
// 先获取到用户选择的省
let currentPro = proEle.value
// 获取对应的市信息
let currentCityList = data[currentPro]
// 清空市select中所有的option
cityEle.innerHTML = ''
// 自己再加一个请选择
let s = "<option disabled selected>--请选择--</option>"
cityEle.innerHTML = s
// 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
// 4.将创建好的option标签添加到第一个select中
cityEle.appendChild(opEle)
}
}
</script>
</body>
标签：原生,
function,
iEle,
绑定,
value,
js,
getElementById,
let,
document
From： https://www.cnblogs.com/xiao01/p/18088381