前端基础之原生js事件绑定案例

合集 - 前端炒米粉(25)

18.前端基础之原生js事件绑定案例2024-03-21

19.前端基础之jQuery引入2024-03-23 20.前端基础之jQuery基础2024-03-23 21.前端基础之jQuery进阶2024-03-23 22.前端基础之jQuery事件2024-03-23 23.前端基础之jQuery重要补充2024-03-23 24.前端框架之Bootstrap2024-03-24 25.前端补充：url编码2024-04-09

原生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框获取焦点失去焦点案例

 <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>

posted @ 2024-03-21 22:20 Xiao0101 阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之jQuery事件

· 前端基础之jQuery进阶

· DOM(原生js事件绑定)

· JavaScript基础介绍三(事件)

· 【18.0】JavaScript之JS事件案例

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

xiao

前端基础之原生js事件绑定案例

原生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>