学习python的第十八天

lx_59_59

于 2022-07-16 10:18:53 发布

阅读量86

点赞数

文章标签：学习 javascript 前端 html

本文链接：https://blog.csdn.net/qq_57257042/article/details/125816569

版权

定时器

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

1. Interval定时器的开启和关闭

setInterval(函数,时间)：创建定时器每个指定时间就自动调用指定的函数。时间单位是毫秒。
clearInterval(定时器对象)：关闭定时器。

num = 1
setInterval(function(){
    console.log('hello world!' + num)
    num++
},1000)

例：让方块向下移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="background-color: red;width: 80px;height: 80px;position: absolute;top: 10px;"></div>
	</body>
</html>

<script type="text/javascript">
top1 = 10
setInterval(function to_bottom(){
    top1 += 10
    document.getElementById('box').style.top = top1 + 'px'
},1000)
</script>

2. Timeout定时器:相当于定时炸弹

setTimeout：创建并开启定时器。
clearTimeout：关闭定时器。

t3 = setTimeout(function(){
    console.log('hello')		
},1000)
clearTimeout(t3)

倒计时跳转百度页面

window.location：跳转页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p1">5秒后自动跳转到百度</p>
	</body>
</html>
<script type="text/javascript">
	time1 = 5
	t1 = setInterval(function(){
		time1--
		if(time1 !== 0){
			document.getElementById('p1').innerText = time1 + '秒后自动跳转到百度'
		}else{
			clearInterval(t1)
			// 打开百度
			window.location = 'https://www.baidu.com'
		}
	},1000)
</script>

事件绑定

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

1. 事件三要素：事件源、事件、事件驱动程序。

2.绑定事件的方法：

在标签内部给事件源的事件属性赋值。<标签名 οnclick=“事件驱动程序”></标签名>
函数中的this是window对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="btn1" type="button" onclick="func1()">hello</button>
	</body>
</html>
<script>
	// 绑定方式一：
	function func1(){
		alert('你好！')
		console.log(this)
	}
</script>

在js中给标签对应的节点的事件属性赋值：事件源节点.onclick = 事件驱动程序对应的函数。

事件驱动程序对应的函数必须是普通函数的函数名或者是匿名函数。
函数中的this是事件源。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="btn2" type="button">提问</button>
	</body>
</html>
<script>
	// 绑定方式二：
	document.getElementById('btn2').onclick = function(){
		alert('今年多大
    }
    document.getElementsByTagName('button')          
</script>

在js中通过节点对象的addEventListener绑定事件；事件源节点.addEventListener(事件名称，事件驱动程序)。
注意：事件需要把on去掉。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="btn3">确定</button>
	</body>
</html>
<script>
	document.getElementById('btn3').addEventListener('click',function(){
		confirm('是否删除')
		console.log(this)
	})
</script>

数字增加减少练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button" onclick="addAction()">+</button>
		<span>0</span>
		<button type="button" onclick="subAction()">-</button>
	</body>
</html>
<script>
    num = 0
	num_span = document.getElementsByTagName('span')[0]
	function addAction(){
		num++
		num_span.innerText = num
	}
	function subAction(){
		 num--
		 num_span.innerText = num
	}
</script>

删除练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <button class="del">删除1</button>
		<button class="del">删除2</button>
		<button class="del">删除3</button>
		<button class="del">删除4</button> 
	</body>
</html>
<script>
    function delAction(){
		this.remove()
	}
	btns = document.getElementsByClassName('del')
	for(index = 0;index<=4;index++){
		btns[index].onclick = delAction
	}
</script>

常见的事件：

1. 鼠标相关事件：

onclick – 鼠标点击事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" onclick="alert('鼠标点击')" >按钮</button>
	</body>
</html>

onmouseover – 鼠标悬停在标签上的事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" onmouseover="alert('鼠标悬停')">按钮</button>
	</body>
</html>

onmouseout – 鼠标从标签上离开的事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button type="button" onmouseover="alert('鼠标离开')">按钮</button>
	</body>
</html>

例：鼠标悬停：点不了；鼠标离开：点我呀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <button id="btn1" type="button">点我呀</button>
	</body>
</html>
<script type="text/javascript">
	// 1. 鼠标相关事件
	btn1 = document.getElementById('btn1')
	btn1.onmouseover = function(){
		this.innerText = '点不了'
	}
	btn1.onmouseout = function(){
		this.innerText = '点我呀'
	}
</script>

2. 键盘相关事件

onkeypress – 某个按键按下对应的事件。
onkeydown – 某个按键按下对应的事件。
onkeyup – 某个按键按下后弹起来对应的事件。

注意：按键相关事件在绑定的时候必须通过js绑定（用方法2或者方法3绑定），才可以在函数中添加事件对应的参数，来获取按键信息。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input id="input1"/>
	</body>
</html>
<script type="text/javascript">
    input1 = document.getElementById('input1')
    input1.onkeypress = function(evt){
        console.log('按键按下！',evt,evt.key)
	}
</script>

3. 值改变事件

onchange – 用于检查下拉列表发生改变的时候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <select name="city" id="city">
            <option value="北京">北京</option>
            <option value="成都">成都</option>
            <option value="上海">上海</option>
            <option value="重庆">重庆</option>
		</select>
	</body>
</html>
<script type="text/javascript">
	city = document.getElementById('city')
	city.onchange = function(){
		console.log('发生改变',city.value)
	}
</script>