JS初级学习笔记（2）

最新推荐文章于 2024-06-24 18:21:05 发布
The_poor_student
最新推荐文章于 2024-06-24 18:21:05 发布
阅读量1.1k
点赞数
分类专栏：网页设计文章标签： html javascript JS
本文链接：https://blog.csdn.net/li_jun_09_05/article/details/48160685
版权
网页设计专栏收录该内容
8 篇文章 1 订阅
订阅专栏
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>获取鼠标坐标</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.οnlοad=function()
			{
				document.onclick = function(ev)
				{
					var oEvent = ev || event;//左边火狐  右边IE
					alert(oEvent.clientX+','+oEvent.clientY);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>事件冒泡</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{padding:50px;}
		</style>
	</head>
	<body>
		<div style="background:#CCC;" οnclick="alert(this.style.background);">
			<div style="background:yellow;" οnclick="alert(this.style.background);">
				<div style="background:red;" οnclick="alert(this.style.background);"></div>
				<!-- 会传递给父级，一直往上延续 -->
			</div>
		</div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>阻止事件冒泡</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{width:300px;height:100px;background:red;display:none;}
		</style>
		<script type="text/javascript">
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName('input')[0];
				var oDiv = document.getElementsByTagName('div')[0];

				oBtn.onclick = function(ev)
				{
					oDiv.style.display = 'block';

					var oEvent = ev || event;
					oEvent.cancelBubble = true;//阻止往上传
				}
				document.onclick = function()
				{
					oDiv.style.display = 'none';
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示" />
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>跟随鼠标移动(有缺陷)</title>
		<meta charset="utf-8">
		<style ty·pe="text/css">
			body{height:2000px;}
			div{width:100px;height:100px;background:red;position:absolute;}
		</style>
		<script type="text/javascript">
			document.onmousemove = function(ev)
			{
				var oEvent = ev || event;
				var oDiv = document.getElementsByTagName('div')[0];

				oDiv.style.left = oEvent.clientX + 'px';
				oDiv.style.top  = oEvent.clientY + 'px';
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>跟随鼠标移动(解决问题)</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{height:2000px;}
			div{width:100px;height:100px;background:red;position:absolute;}
		</style>
		<script type="text/javascript">
			function getPos(ev)
			{
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				var scrollTop  = document.documentElement.scrollTop  || document.body.scrollTop;
				
				return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
			}

			document.onmousemove = function(ev)
			{
				var oEvent = ev || event;
				var oDiv = document.getElementsByTagName('div')[0];
				
				oDiv.style.left = getPos(oEvent).x + 'px';
				oDiv.style.top  = getPos(oEvent).y + 'px';
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>类似鼠标画笔</title>
		<meta charset="utf-8">
		<style type="text/css">
			body{height:2000px;}
			div{width:15px;height:15px;background:black;position:absolute;}
		</style>
		<script type="text/javascript">
			function getPos(ev)
			{
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				var scrollTop  = document.documentElement.scrollTop  || document.body.scrollTop;

				return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
			}
			document.onmousemove = function(ev)
			{
				var oEvent = ev || event;
				var oDiv = document.getElementsByTagName('div');
				
				oDiv[0].style.left = getPos(oEvent).x + 'px';
				oDiv[0].style.top  = getPos(oEvent).y + 'px';

				for(var i=oDiv.length-1; i>0; i--)
				{
					oDiv[i].style.left = oDiv[i-1].offsetLeft + 'px';
					oDiv[i].style.top  = oDiv[i-1].offsetTop + 'px';
				}
			}
		</script>
	</head>
	<body>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>键盘移动物体</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{width:100px;height:86px;background:yellow;position:absolute;}
		</style>
		<script type="text/javascript">
			document.onkeydown = function(ev)
			{
				var oDiv = document.getElementsByTagName('div')[0];
				var oEvent = ev || event;

				if( oEvent.keyCode == 37 )
					oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
				else if( oEvent.keyCode == 39 )
					oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>Ctrl加回车留言</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{width:400px;height:300px;border:1px solid #DDD;}
		</style>
		<script type="text/javascript">
			document.onkeydown = function(ev)
			{
				var oEvent = ev || event;

				var oTxt = document.getElementsByTagName('input')[0];
				var oDiv = document.getElementsByTagName('div')[0];

				if( oEvent.keyCode == 13 && oEvent.ctrlKey)
				  oDiv.innerHTML += oTxt.value + '<br />';
			}
		</script>
	</head>
	<body>
		<input type="text" />
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>阻止默认事件(自定义右键菜单)</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{width:280px;background:#CCC;position:absolute;display:none;}
		</style>
		<script type="text/javascript">
			// 右键菜单事件
			document.oncontextmenu = function(ev)
			{
				var oEvent = ev || event;
				var oDiv = document.getElementsByTagName('div')[0];

				oDiv.style.display = 'block';
				oDiv.style.left = oEvent.clientX + 'px';
				oDiv.style.top  = oEvent.clientY + 'px';

				return false;
			}
			document.onclick = function()
			{
				var oDiv = document.getElementsByTagName('div')[0];
				oDiv.style.display = 'none';
			}
		</script>
	</head>
	<body>
		<div>
			<p>菜单1</p>
			<p>菜单2</p>
			<p>菜单3</p>
			<p>菜单4</p>
			<p>菜单5</p>
		</div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>阻止默认事件(只允许数字输入)</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function()
			{
				var oTxt = document.getElementsByTagName('input')[0];
				oTxt.onkeydown = function(ev)
				{
					var oEvent = ev || event;
					if(!(48 <= oEvent.keyCode && oEvent.keyCode <= 57) && (oEvent.keyCode != 8) )
						return false;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>拖拽效果</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{width:100px;height:100px;background:green;position:absolute;}
		</style>
		<script type="text/javascript">
			window.onload = function()
			{
				var oDiv = document.getElementsByTagName('div')[0];

				oDiv.onmousedown = function(ev)
				{
					var oEvent = ev || event;

					var disX = oEvent.clientX - oDiv.offsetLeft;
					var disY = oEvent.clientY - oDiv.offsetTop;
					
					document.onmousemove = function(ev)
					{
						var oEvent = ev || event;
						var L = oEvent.clientX - disX;
						var T = oEvent.clientY - disY;

						if( L < 0 )
							L = 0;     //页面可视区域的宽度
						else if( L > document.documentElement.clientWidth - oDiv.offsetWidth )
							L = document.documentElement.clientWidth - oDiv.offsetWidth;
						if( T < 0 )
							T = 0;    //可视区域的高度
						else if( T > document.documentElement.clientHeight - oDiv.offsetHeight )
							T = document.documentElement.clientHeight - oDiv.offsetHeight;

						oDiv.style.left = L + 'px';
						oDiv.style.top  = T + 'px';
					}
					document.onmouseup = function()
					{
						document.οnmοusemοve=null;
						document.οnmοuseup=null;
					}
				}
			}
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>AJAX</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName('input')[0];
				oBtn.onclick = function()
				{
					//1. 创建 Ajax 对象
					if(window.XMLHttpRequest)
						var oAjax = new XMLHttpRequest();
					else
						var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

					//2.连接到 服务器 open(方法，文件名，异步传输)
					oAjax.open('GET','read.txt?t='+ new Date().getTime(),true);//阻止缓存

					//3. 发送请求
					oAjax.send();

					//4.接收返回
					oAjax.onreadystatechange = function()
					{
						// oAjax.readyState 浏览器 和 服务器 进行到哪一步了
						if( oAjax.readyState == 4)   //读取完成
						{
							if(oAjax.status == 200)   //成功
								alert('成功:' + oAjax.responseText);
							else
								alert('失败:' + oAjax.status);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="读取" />		
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>AJAX 封装 以及 eval的使用</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			function ajax(url, fnSucc, fnFaild)
			{
				//1. 创建 Ajax 对象
				if(window.XMLHttpRequest)
					var oAjax = new XMLHttpRequest();
				else
					var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

				//2.连接到 服务器 open(方法，文件名，异步传输)
				oAjax.open('GET',url,true);//阻止缓存

				//3. 发送请求
				oAjax.send(); 

				//4.接收返回
				oAjax.onreadystatechange = function()
				{
					// oAjax.readyState 浏览器 和 服务器 进行到哪一步了
					if( oAjax.readyState == 4)   //读取完成
					{
						if(oAjax.status == 200)   //成功 oAjax.status == 404
							fnSucc(oAjax.responseText);
						else
						{
							if( fnFaild )
								fnFaild();
						}
					}
				}
			}
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName('input')[0];
				oBtn.onclick = function()
				{
					ajax('read.txt',function(str){alert(str);})
				}
			}
			/*
			   eval的用法，将字符串转换成数值型
			   data.txt 的内容为：
			   [
					{user: 'blue', pass: '123456'},
					{user: '张三', pass: '654321'},
					{user: '李四', pass: '789456'},
					{user: '王五', pass: '7777'}
				]
				oBtn.οnclick=function ()
				{
					ajax('data.txt?t='+new Date().getTime(), function (str){
						var arr=eval(str);
						
						for(var i=0;i<arr.length;i++)
						{
							var oLi=document.createElement('li');
							
							oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
							
							oUl.appendChild(oLi);
						}
					}, function (){
						alert('失败');
					});
				};
			*/
		</script>
	</head>
	<body>
		<input type="button" value="读取" />		
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>事件绑定</title>
		<meta charset="utf-8" >
		<script type="text/javascript">
			window.onload = function()
			{
				var oBtn = document.getElementsByTagName('input')[0];
				if( oBtn.attachEvent )//低版本IE
					oBtn.attachEvent('onclick',function(){alert('a');});
				else
					oBtn.addEventListener('click',function(){alert('a');},false);
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" />
	</body>
</html>
<script type="text/javascript">
	function myAddEvent(obj, ev, fn)//函数封装
	{
		if( obj.attachEvent )
			obj.attachEvent('on'+ev,fn);
		else
			obj.addEventListener(ev, fn, false);
	}
</script>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>面向对象(第一个案例)</title>
		<meta charset="utf-8" >
		<script type="text/javascript">
			var obj = new Object();
			obj.name = '大帅哥';
			obj.qq = '674059309';
			obj.showName = function ()
			{
				alert('我的名字叫：'+this.name);
			}
			obj.showQQ = function ()
			{
				alert('我的QQ：'+this.qq);
			}
			obj.showName();
			obj.showQQ();
		</script>
	</head>
	<body>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>面向对象（工厂方式）</title>
		<meta charset="utf-8" >
		<script type="text/javascript">
			function createPerson(name,qq)//构造函数
			{
				var obj = new Object();

				obj.name = name;
				obj.qq = qq;

				obj.showName = function ()
				{
					alert('我的名字叫：'+this.name);
				}
				obj.showQQ = function ()
				{
					alert('我的QQ：'+this.qq);
				}

				return obj;
			}
			var obj = createPerson('小小俊','674059309');
			var obj_copy = createPerson('小俊','674059309');
			obj.showName();
			obj_copy.showName();
			alert( obj.showName == obj_copy.showName );
		</script>
	</head>
	<body>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>面向对象（工厂方式,改进）</title>
		<meta charset="utf-8" >
		<script type="text/javascript">
			function createPerson(name,qq)//构造函数
			{
				this.name = name;
				this.qq = qq;
				//采用this的写法，这样就可以使用new
				//公共函数采用原型添加，这样可以节省空间。
			}
			createPerson.prototype.showName = function ()
			{
				alert('我的名字叫：'+this.name);;
			}
			createPerson.prototype.showQQ = function ()
			{
				alert('我的QQ：'+this.qq);;
			}

			var obj = new createPerson('小小俊','674059309');
			var obj_copy = new createPerson('小俊','674059309');
			
			obj.showName();
			obj_copy.showName();
			alert( obj.showName == obj_copy.showName );
		</script>
	</head>
	<body>
	</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
	<head>
		<title>面向对象（原型添加函数）</title>
		<meta charset="utf-8" >
		<script type="text/javascript">
			var arr = new Array(12,55,34,78,676);
			var arr_copy = new Array(12,55);

			arr.sum = function()//只有这个数组才有这个方法
			{
				var result = 0;
				for(var i=0; i < this.length; i++)
					result += this[i];
				return result;
			}

			Array.prototype.sum = function ()//原型添加函数
			{
				var result = 0;
				for(var i=0; i < this.length; i++)
					result += this[i];
				return result;
			}

			alert(arr.sum());
			alert(arr_copy.sum());

		</script>
	</head>
	<body>
	</body>
</html>
<!-- *************************************************************************************-->