day18-js 定时器、事件绑定

最新推荐文章于 2022-07-15 17:49:19 发布

Feifei_peng

最新推荐文章于 2022-07-15 17:49:19 发布

阅读量437

点赞数

分类专栏：日常作业文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Feifei_peng/article/details/125791530

版权

日常作业专栏收录该内容

59 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的定时器Interval和Timeout的使用，包括如何开启和关闭定时器，并展示了示例代码。同时，文章讲解了事件绑定的三种方法及其应用场景，如鼠标和键盘事件。此外，还提供了事件源、事件驱动程序的概念。最后，文中给出了实际的HTML和JavaScript代码，演示了按钮点击事件的绑定和删除操作，以及如何生成随机颜色。

摘要由CSDN通过智能技术生成

JS相关语法

定时器

js中定时器有两种：Interval、Timeout

Intercval定时器的开启和关闭

setInterval(函数，时间)-创建定时器，每隔指定时间就自动调用指定函数，返回一个定时器对象，时间的单位是毫秒

关闭定时器：clearInterval(定时器对象)

Timeout定时器相当于与一个定时炸弹，时间到了执行响应函数

/* 让方块上下移动*/
<body>
<div id="box" style="background-color: aqua;height: 80px;width: 80px;position: absolute;top: 10px;">
</div>
</body>
<script type="text/javascrpit">
    top1=10
	t1 = setInterval(function(){
        top1+=2
        document.getElementById('box').style.top=top1+'px'
    },1000)

window.location="目标网址":打开网页

alert(字符串):弹窗

事件绑定

事件绑定：让网页内容对人类的指定的行为做出反应

1.事件的三要素：事件源，事件，事件驱动程序

2.绑定事件的方法

1）在标签内部给事件源的事件属性赋值：<标签名 onclick='事件驱动程序'></标签名>

注意：这个方法的this是window对象

2）在js中给标签对应的节点的事件属性值赋值：事件源节点.onclick=事件驱动程序对应的函数
注意：事件驱动程序对应的函数必须是普通函数的函数名或者匿名函数
注意：函数的this是事件源

3)在js中通过节点对象的addEventListener绑定事件: 事件源节点.addEventLisetener(事件名称,事件驱动对应函数)
注意：这里的事件名称要去掉on this是事件源

3.常见的事件

1.鼠标相关事件
onclick -鼠标点击事件
onmouseover -鼠标悬停在标签上的事件
onmouseout- 鼠标从标签上离开时发生的事件

2.按键相关事件
onkeypress -某个按键按下对应的事件
onkeydown - 某个按键按下对应的事件
onkeyup- 某个按键按下后弹起对应的事件
注意：按键相关事件在绑定的时候必须通过js绑定(用方法2或者3绑定),才能在函数中添加事件对应参数，获取按键信息

3.值改变事件 -用于检测下拉列表发生改变的时候
onchange

<button id="btn1" tyep="button" οnclick='func()')">点击</button>
<button id="btn2" tyep="button">不要点了</button>
<button id="btn3" tyep="button">确定</button>
<br>
<button class="del">删除1</button>
<button class="del">删除2</button>
<button class="del">删除3</button>
<button class="del">删除4</button>

<script type="text/javascript">
	 // 绑定方式1
	 function func(){
		 alert('累了')
	 }
	 // 绑定方式2
	 document.getElementById('btn2').οnclick=function(){
		 alert('真的累了')
	 }
	 //  绑定方式3
	 document.getElementById('btn3').addEventListener('click',function(){
		 confirm('是否删除？')
	 })
	 // 利用下标进行多个相同步骤的操作
	 function delAction(){
		this.remove()
	}
	btns = document.getElementsByClassName('del')
	for(index=0;index<4;index++){
		btns[index].οnclick=delAction
	}
 </script>

随机颜色

random() - 产生0~1的随机数

parseInt()-对结果进行取整

r = parseInt(Math.random()*255)
g = parseInt(Math.random()*255)
b = parseInt(Math.random()*255)
div.style.backgroundColor = “rgba(”+r+“,”+g+“,”+b+“,0.3)” 注意格式