【千锋Python2205班9.15笔记-day18-前端基础学习（7）】

最新推荐文章于 2024-08-09 10:42:44 发布

weixin_43600905

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量197

点赞数

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/weixin_43600905/article/details/126876689

版权

01-闪烁效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
	
			#box1{
				width: 700px;
				height: 350px;
				border: 1px solid rgb(30, 30, 30);
				
				margin-left: auto;
				margin-right: auto;
				
				/* overflow: hidden; */
			}
			
			#box1>div{
				width: 70px;
				height: 70px;
				float: left;
			}
			
			#box2{
				text-align: center;
				margin-top: 15px;
			}
			
			#box2>button{
				width: 70px;
				height: 35px;
				border: none;
				background-color: coral;
				color: white;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		
		<div id="box2">
			<button onclick="addBox()">添加</button>
			<button id="btn" onclick="blinkAction()">闪烁</button>
		</div>
	</body>
	
	<script>
		// =========== 闪烁和暂停==========
		function blinkAction(){
			var btn = document.getElementById('btn')
			var title = btn.innerText
			if(title == '闪烁'){
				btn.innerText = '暂停'
				
				// 创建定时器修改所有小盒子的背景颜色
				t1 = setInterval(function(){
					var allSamllBox = document.getElementById('box1').children
					var len = allSamllBox.length
					var index = 0
					while(index < len){
						var smallBox = allSamllBox[index]
						r = parseInt(Math.random() * 255)
						g = parseInt(Math.random() * 255)
						b = parseInt(Math.random() * 255)
						smallBox.style.backgroundColor = `rgba(${r},${g},${b}, 0.5)`
						
						index += 1
					}
				}, 200)
				
			}else{
				btn.innerText = '闪烁'
				clearInterval(t1)
			}
		}
		
		// ============添加小盒子============
		function addBox(){
			// 创建小盒子
			var sBox = document.createElement('div')
			r = parseInt(Math.random() * 255)
			g = parseInt(Math.random() * 255)
			b = parseInt(Math.random() * 255)
			sBox.style.backgroundColor = `rgba(${r},${g},${b}, 0.5)`
			
			// 添加盒子
			var box1 = document.getElementById('box1')
			box1.insertBefore(sBox, box1.firstElementChild)
			
			// 删除超过的部分
			var allSmallBox = box1.children
			// console.log(allSmallBox.length)
			if(allSmallBox.length == 51){
				box1.lastElementChild.remove()
			}
			
		}
		
	</script>
</html>

02-定时器的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 60px;
				height: 60px;
				background-color: skyblue;
				position: absolute;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<button onclick="closeTimer()">停止</button>
		<button onclick="clearTimeout(t5)">拆炸弹</button>
	</body>
	<script>
		// 1.Interval对应的定时器  -  每间隔指定时间就执行一次指定的操作(指定的操作会被反复执行多次)
		// 1）创建并启动定时器：setInterval(需要执行的操作对应的函数,间隔时间)
		// 2) 关闭定时器：clearInterval(定时器对象)
		// 注意：时间的单位是毫秒(1000毫秒等于1秒)

		t1 = setInterval(function(){
			// 每间隔指定时间要做的事情
			console.log('hello world!')
		},5000)
		
		// 用定时器实现标签自动移动的功能
		boxTop = 10
		t2 = setInterval(function(){
			boxTop += 2
			document.getElementById('box').style.top = boxTop + 'px'
		}, 150)
		
		// 用定时器实现放大的功能
		boxSzie = 60
		t3 = setInterval(function(){
			boxSzie += 2
			document.getElementById('box').style.width = boxSzie + 'px'
			document.getElementById('box').style.height = boxSzie + 'px'
		}, 150)
		
		// 用定时器实现闪烁的功能
		t4 = setInterval(function(){
			r = parseInt(Math.random() * 255)
			g = parseInt(Math.random() * 255)
			b = parseInt(Math.random() * 255)
			document.getElementById('box').style.backgroundColor = `rgba(${r},${g},${b}, 0.5)`
		}, 100)
		
		
		// 关闭所有的定时器
		function closeTimer(){
			clearInterval(t2)
			clearInterval(t3)
			clearInterval(t4)
		}
		
		// 2. Timeout对应的定时器  -  到了指定时间就执行指定操作(指定操作只会执行一次)
		// 1)创建并启动定时器：setTimeout(需要执行的操作对应的函数,间隔时间)
		// 2)关闭定时器：clearTimeout(定时器对象)
		t5 = setTimeout(function(){
			console.log('爆炸💥！')
			open('https://www.baidu.com')
		},5000)
		
		
		
		// 补充：
		// open('https://www.baidu.com')
	</script>
	
</html>

03-定时跳转

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

04-时间绑定方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 点击问候按钮就弹一个弹框 -->
		<button onclick="alert('hello!')">问候1</button>
		<button onclick="btn1Action()">问候2</button>
		
		<button id="btn1">按钮1</button>
		<hr>
		
		<div id="box1">
			<button>点击1</button>
			<button>点击2</button>
			<button>点击3</button>
			<button>点击4</button>
			<button>点击5</button>
		</div>
		
		<button id="btn2" onclick="">情况1</button>
		<button id="btn3" onclick="">情况2</button>
		<hr>
	</body>
</html>

<!-- 
 1.事件绑定	-	当某个标签发生了某件事件之后就做什么(xxx发生xxx就干xxx)
 2.事件绑定三要素： 事件源、事件、事件驱动程序
 3.绑定事件的三种方式:
 1)在html代码中直接给事件源对应标签的事件属性赋值
 2)在js中给事件源对应的标签对象的事件属性赋值

 4.两种不同绑定方式的选择
 1)如果是通过js代码创建的标签，需要绑定事件的时候只能用第二种方法
 2)第一种绑定方式，事情驱动程序对应的函数中的this是window对象；第二种绑定方式事件驱动程序中的this是事件源
 -->
<script>
	// function dianji1(){
	// 	var title = document.getElementById('d1').innerText
	// 	alert('点击了'+title)
	// }
	
	// function dianji2(){
	// 	var title = document.getElementById('d2').innerText
	// 	alert('点击了'+title)
	// }
	
	var allBtn = document.getElementById('box1').children
	var index = 0
	var len = allBtn.length
	while(index < len){
		var btn = allBtn[index]
		btn.onclick = function(){
			var title = this.innerText
			alert('点击了'+title)
		}
		index += 1
	}
	
	document.getElementById('btn2').onclick = btnAction
	document.getElementById('btn3').onclick = btnAction
	
	function btnAction(){
		console.log(this)
		alert('情况发生了!')
	}
	
	
	// 给js创建的标签绑定事件
	var btn2 = document.createElement('button')
	btn2.innerText = '按钮2'
	var body = document.getElementsByTagName('body')[0]
	body.appendChild(btn2)
	btn2.onclick = function(){
		alert('下课啦!')
	}
	
	
	// 1)在html通过标签绑定事件
	function btn1Action(){
		alert('hello world!')
	}
	
	// 2)在js中通过标签对象绑定事件
	var btn1 = document.getElementById('btn1')
	// btn1.onclick = btn1Action
	btn1.onclick = function(){
		alert('hello js!')
	}
	
</script>

05-常见事件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onmousedown="alert('按下')">按钮1</button>
		<img src="img/l-icon.png" onclick="alert('点击图片')">
		<button id="btn1">按钮2</button>
		
		
		<br>
		<div id="div1" style="background-color: saddlebrown; height:80px; width: 100px;"></div>
		<br>
		<input type="text" onkeypress="alert('键盘事件')">
		<textarea cols="30" rows="10" id="i1"></textarea>
		
		
		
		<br><br>
		<select name="" id="c1">
			<option value="成都">成都</option>
			<option value="重庆" selected>重庆</option>
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
		</select>
		<span id="city">重庆</span>
	</body>
</html>

<script>
	// 1.鼠标相关事件(针对所有的可见标签有效)
	// 1)onclick   -  点击事件
	// 2)onmousedown	-	鼠标在标签上按下
	// 3)onmouseover	-	鼠标悬停在标签上
	// 4)onmouseout		-	鼠标从标签上离开
	document.getElementById('btn1').onmousedown = function(evt){
		console.log(evt)
		// 获取鼠标触发事件的那一瞬间，鼠标在标签上的位置
		console.log(evt.offsetX, evt.offsetY)
	}
	
	// 练习：点击div的左边让div变成红色，点击div的右边就有让它变成绿色
	document.getElementById('div1').onclick = function(evt){
		var x = evt.offsetX
		var width = this.style.width
		var half_width = width.slice(0, width.length-2) / 2
		if(x<half_width){
			this.style.backgroundColor = "red"
		}else(
			this.style.backgroundColor = "green"
		)
		
	}
	
	// 2.键盘相关事件(针对输入框)
	// 1）onkeydown	-	当标签处于活跃状态的时候按下一个按键
	// 2)onkeyup  -	当标签处于活跃状态的时候按键弹起
	// 3)onkeypress		-	当标签处于活跃状态的时候按键一个键
	document.getElementById('i1').onkeydown = function(evt){
		console.log('有按键按下')
		// 获取当前按的是哪个键
		console.log(evt.key)
		// 获取当前输入框中已经输入的内容
		console.log(this.value)
	}
	
	// 3.值改变: onchange
	document.getElementById('c1').onchange = function(){
		console.log('城市发生改变', this.value)
		document.getElementById('city').innerText = this.value
	}
	
	
	
</script>

weixin_43600905

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【千锋Python2205班9.15笔记-day18-前端基础学习（7）】

【千锋Python2205班9.15笔记-day18-前端基础学习（6）】
复制链接

扫一扫