day18

最新推荐文章于 2022-12-17 13:30:52 发布

lmj275871

最新推荐文章于 2022-12-17 13:30:52 发布

阅读量35

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lmj275871/article/details/125820441

版权

定时器

js定时器有两种：Interval、Timeout

	<body>
		<div id = "box" style="background-color: red;width: 80px;height: 80px;position: absolute;top: 10px;"></div>
		<button type="button" onclick="clearInterval(t1)">关闭定时器1</button>
	</body>

js定时器有两种：Interval、Timeout

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

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

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

	//让方块上下移动
	top1 = 10
	t2 = setInterval(function(){
		top1 += 10
		document.getElementById('box').style.top = top1+'px'
	},100)

2.Timeout定时器(相当于定时炸弹)

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

定时跳转

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

事件绑定

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

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

2.绑定事件的方法
1)在标签内部给事件源的事件属性赋值：<标签名 οnclick=“事件驱动程序”></标签名>
函数中的this是window对象
2)在js中给标签对应的节点的事件属性赋值: 事件源节点.onclick = 事件驱动程序对应的函数
注意：事件驱动程序对应的函数必须是普通函数的函数名或者是匿名函数
函数中的this是事件源
3)在js中通过节点对象的addEventListener绑定事件：事件源节点.addEventListener(事件名称,事件驱动程序对应的函数)
注意：这儿的事件名需要把On去掉

3.常见的事件
1)鼠标事件：点击事件(onclick)
2)键盘事件
3)值改变

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id = "btn1" type="button" onclick="func1()">问候</button>
		<button id = "btn2" type="button">提问</button>
		<button id = "btn3" type="button">删除</button>
		<br><br>
		<button type="button" onclick="func2()">+</button>
		<span id = "span1">0</span>
		<button type="button" onclick="func3()">-</button>
		<br>
		<hr>
		<button id = "d1" type="button" onclick="delAction1()">删除1</button>
		<button id = "d2" type="button" onclick="delAction2()">删除2</button>
		<button id = "d3" type="button" onclick="delAction3()">删除3</button>
		<button id = "d4" type="button" onclick="delAction4()">删除4</button>
		<br><br>
		<button class = "del" type="button">删除1</button>
		<button class = "del" type="button">删除2</button>
		<button class = "del" type="button">删除3</button>
		<button class = "del" type="button">删除4</button>
	</body>
</html>

绑定方式

	//绑定方式1
	function func1(){
		alert('你好')
		console.log(this)
	}
	
	//绑定方式2
	document.getElementById('btn2').οnclick=function(){
		alert('今年多大？')
		console.log(this)
	}
	
	//绑定方式3
	document.getElementById('btn3').addEventListener('click',function(){
		confirm('是否删除')
		console.log(this)
	})

数字增加减少

	num = 0
	function func2(){
		document.getElementById('span1').innerText = num+=1
	}
	function func3(){
		document.getElementById('span1').innerText = num-=1
	}

删除练习

	//方法1：
	function delAction1(){
		document.getElementById('d1').remove()
	}
	function delAction2(){
		document.getElementById('d2').remove()
	}
	function delAction3(){
		document.getElementById('d3').remove()
	}
	function delAction4(){
		document.getElementById('d4').remove()
	}
	//方法2：
	function  delAction(){
		this.remove()
	}
	btns = document.getElementsByClassName('del')
	for(index=0;index<4;index++){
		btns[index].onclick = delAction
	}

常见事件类型

1.鼠标相关事件：
onclock – 鼠标点击事件
onmouseover – 鼠标悬停在标签上的事件
onmouseout – 鼠标从标签上离开的事件

2.键盘相关事件
onkeyPress – 某个按键按下对应的事件
onkeydown – 某个按键按下对应的事件
onkeyup – 某个按键按下后弹起来对应的事件
注意：按键相关事件在绑定的时候必须通过js绑定（用方法2或者方法3绑定），才可以在函数中添加事件对应的参数，来获取按键信息

3.值改变 – 用于检测下拉列表的选项发生改变的时候
onchange

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onmouseover="alert('鼠标悬停')">按钮1</button>
		<button type="button" onmouseout="alert('鼠标离开')">按钮2</button>
		<button id = "btn1" type="button">点我呀</button>
		<input id = "input1">
		<select id = "city" name="city" >
			<option value="成都">成都</option>
			<option value="重庆">重庆</option>
			<option value="北京">北京</option>
			<option value="上海">上海</option>
		</select>
	</body>
</html>

1.鼠标相关事件

	btn1 = document.getElementById('btn1')
	btn1.onmouseover = function(){
		this.innerText = '点不了'
	}
	btn1.onmouseout = function(){
		this.innerText = '点我呀'
	}

2.键盘相关事件

	input1 = document.getElementById('input1')
	input1.onkeypress = function(evt){
		console.log('键盘按下',evt,evt.key)
	}

3.值改变事件

	city = document.getElementById('city')
	city.οnchange=function(){
		console.log('选项发生改变',city.value)
	}

案例：缩略图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<img id = "big" src="img/picture-1.jpg" alt="">
		</div>
		<div>
			<img class = "small" src="img/thumb-1.jpg" alt="">
			<img class = "small" src="img/thumb-2.jpg" alt="">
			<img class = "small" src="img/thumb-3.jpg" alt="">
		</div>
		
		<script type="text/javascript">
			function change_image(){
				document.getElementById('big').src = 'img/picture-'+this.i+'img'
			}
			
			small_imgs = document.getElementsByClassName('small')
			for(index = 0;index<3;index++){
				small = small_imgs[index]
				small.i = index+1
				small.onmouseover = change_image
			}
		</script>
	</body>
</html>

案例：动态添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				margin-left: 50px;
				margin-top: 20px;
			}
			#box1>div{
				background-color: rgb(98,158,160);
				width: 200px;
				height: 50px;
				margin-top: 2px;
				color: white;
				font-size: 20px;
				line-height: 50px;
			}
			
			#box1 p{
				float: left;
				text-align: center;
				width: 180px;
			}	
			#box2{
				margin-top: 20px;
				margin-left: 50px;
			}
			#box2>input{
				border: 0;
				border-bottom: 1px solid rgb(169,169,169);
				width: 200px;
				height: 50px;
				outline: 0;
				text-align: center;
				font-size: 20px;
				vertical-align: bottom;		/*垂直对齐方式*/
			}
			#box2>button{
				width: 70px;
				height: 28px;
				color: white;
				font-size: 18px;
				border: 0;
				background-color: rgb(253,123,87);
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div>
				<p>苹果</p>
				<span>×</span>
			</div>
			<div>
				<p>香蕉</p>
				<span>×</span>
			</div>
			<div>
				<p>西瓜</p>
				<span>×</span>
			</div>
			<div>
				<p>火龙果</p>
				<span>×</span>
			</div>
		</div>
		<div id="box2">
			<input type="" name="" id="name" value="" />
			<button type="button" onclick="add_friut()">确定</button>
		</div>
		
		<script type="text/javascript">
			function add_friut(){
				//1.获取输入框内容
				input1 = document.getElementById('name')
				name = input1.value
				input1.value = ''
				//2.创建新水果对应的新标签
				div = document.createElement('div')
				p = document.createElement('p')
				p.innerText = name
				span = document.createElement('span')
				span.innerText = '×'
				div.appendChild(p)
				div.appendChild(span)
				// 新增的水果的颜色是随机色
				// random()  -  产生0~1的随机数
				r = parseInt(Math.random()*255)
				g = parseInt(Math.random()*255)
				b = parseInt(Math.random()*255)
				div.style.backgroundColor = "rgba("+r+","+g+","+b+",0.4)"
				box1 = document.getElementById('box1')
				box1.insertBefore(div, box1.firstElementChild)
			}
		</script>
	</body>
</html>