JavaScrip入门简记(0321~0324)

最新推荐文章于 2024-05-30 11:27:58 发布

至尊毛豆

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量290

点赞数

分类专栏： JS入门（2022春）文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43664464/article/details/123645119

版权

JS入门（2022春）专栏收录该内容

11 篇文章 0 订阅

订阅专栏

0321

滚轮事件

键盘事件

限制输入小练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style type="text/css">


</style>
<script type="text/javascript">
	window.onload=function(){
		var input=document.getElementsByTagName("input")[0];

		input.onkeydown=function(event){
			event=event||window.event;
			if(event.keyCode>=48 && event.keyCode<=57){
				return false;
			}
		};	
	}
	
</script>
<body>
	<input type="text"/> 

</html>

方向键移动小练习

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	#box{
		height: 50px;
		width: 50px;
		background-color: red;
		position: absolute;
	}
</style>
<script type="text/javascript">
	window.onload=function(){
		box=document.getElementById("box");
		var timer;
		var dir=0;
		var speed=10;
				
		setInterval(function(){			
			
			switch(dir){	//记得加event
				case 37:
					box.style.left=box.offsetLeft-speed+"px";
					break;
				case 39:
					box.style.left=box.offsetLeft+speed+"px";
					break;
				case 38:
					box.style.top=box.offsetTop-speed+"px";
					break;
				case 40:
					box.style.top=box.offsetTop+speed+"px";
					break;	
			}
		},30);
		
		document.onkeydown=function(event){			
			event=event||window.event;
			dir=event.keyCode;
			// clearInterval(timer);

			if(event.ctrlKey){
				speed=30;
			}else{
				speed=10;
			}				
		}
		document.onkeyup=function(){
			dir=0;
		}			
	};
	
</script>
<body>
	<div id="box"></div>
</body>
</html>

BOM对象

DOM操作网页，BOM操作浏览器

转布尔值，例：
alert(window.ActiveXObject)->alert(!!window.ActiveXObject)

检查对象中是否包含某属性：
alert("ActiveXObject" in window);

强制清空缓存刷新：ctrl+f5 / location.reload(true)

定时器

setInterval()定时函数，可将一个函数每隔一段时间执行一次
clearInterval()可用来关闭一个定时器

0323

切换图片小练习

需要用到多张图片时，可创建图片数组
延时调用setTimeout(),关闭延时调用clearTimeout()

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<script type="text/javascript">

	window.onload=function(){
		var img1=document.getElementById("img1");
		var btn1=document.getElementById("btn1");
		var btn2=document.getElementById("btn2");
		var imgArr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg"];
		var index=0;
		
		var timer;
		btn1.onclick=function(){
			clearInterval(timer);
			timer=setInterval(function(){
				index++;
				if(index==imgArr.length){
					index=0;
				}
				img1.src=imgArr[index];
			},1000);
		}
		
		btn2.onclick=function(){
			clearInterval(timer);
		}	
	};
	
</script>
<body>
	<img id="img1" src="1.jpg"/>
	<br/>
	<button type="button" id="btn1">切换</button>
	<button type="button" id="btn2">停止</button>
</body>
</html>

定时器的应用

移动小方块练习

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	#box{
		height: 50px;
		width: 50px;
		margin: 0;
		padding: 0;
		top: 50px;
		background-color: red;
		position: absolute;
		left: 0;		
	}
	#line{
		width: 0;
		height: 2000px;
		border: 1px black solid;
		position: absolute;
		left: 900px;
		top: 0;
	}

</style>
<script type="text/javascript">
	window.onload=function(){
		function getStyle(obj,name){
			if(window.getComputedStyle){
				return getComputedStyle(obj,null)[name];
			}else{
				return obj.currentStyle[name];
			}		
		}
		
		var box=document.getElementById("box");
		var btn=document.getElementById("btn01");
		var timer;

		btn.onclick=function(){
			timer=setInterval(function(){
				var oldposition=parseInt(getStyle(box,"left"));
				var newposition=oldposition+19;
				if(newposition>900){
					newposition=900;
				}
				box.style.left=newposition+"px";
				if(newposition>=900){
					clearInterval(timer);
				}
			},30);			
		}
	};
	
</script>
<body>
	<button type="button" id="btn01">点俺移动！</button>
	<br/>
	<div id="box"></div>
	<div id="line" ></div>
</body>
</html>

考虑到用户体验，需要输入判断正负的参数时，应在函数中做一定处理，避免用户自己判断。

可向执行动画的对象中添加一个timer属性，用来保存对象自己的定时器标识——obj.timer

callback&&callback()，若有则执行，没有不执行。

至尊毛豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScrip入门简记(0321~0324)

0303若源文件包含一个public类，则文件名须按该类名命名；编译后，每个类都对应一个.class一个源文件最多只能有一个public类，但是可以将main方法写到public类中学习的闭环：需求——求助传统技术——新技术的先进性——新技术基本原理和语法（忽略细节）——基本程序——抠细节制表位0321...
复制链接

扫一扫