javascript小效果

最新推荐文章于 2022-09-25 22:08:41 发布

liaojuajun

最新推荐文章于 2022-09-25 22:08:41 发布

阅读量308

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/liaojuajun/article/details/101446852

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目录
1.获得和设置行内样式
2.设置样式的变化
3.自动运动
4.元素向左运动
5.运动停止
6.加速运动
7.元素显隐
8，来回运动
9.鼠标事件
10.dom
11.获得元素的方法
12.操作元素内容
13.设置新的元素内容
14.倒计时跳转
15.元素转移
16.元素互相转移
17.操作元素属性
18.操作元素任意属性
19.实际作用在元素上的样式
20.通过关系找元素
21，节点方法
22.获得元素
23.获得元素尺寸
24.获取滚动条元素滚动位置
25.滚动条位置
26.滑动到底部提醒
27.获取事件对象
28.tab切换
29.键盘事件
30.打字游戏
31.阻止表单提交
32.获得表单焦点
33.事件流
34.阻止a标签跳转
35.this
36.圆角
37.日期，时间
38.递归函数

1.获得和设置行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin: 0;
			}
			#btn{
				margin: 20px;
			}
			#hd{
				height: 200px;
				background: mediumpurple;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				var hd = document.getElementById("hd");
				
//				给按钮加单击事件
				btn.onclick = function(){
//					获得元素的行内样式
//					var w = hd.style.width;
//					alert(w);
					
//					设置行内样式
//					hd.style.width = '400px';
					
					var ml = hd.style.marginLeft;
					alert(ml);
				}
			}
			
		</script>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我啊" />
		<br /><br />
		
		<div id="hd" style="width: 300px;margin-left: 20px;"></div>
		

		
	</body>

2.设置样式的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin: 0;
			}
			#btn{
				margin: 20px;
			}
			#hd{
				height: 200px;
				background: mediumpurple;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				var hd = document.getElementById("hd");
		
//				给按钮加单击事件
				btn.onclick = function(){
					
//					获得元素当前的宽度
					var old_width = hd.style.width;
//					计算新宽度,需要加parseInt
					var new_width = parseInt(old_width)+10;
//					将新宽度赋值回去
					hd.style.width = new_width+'px';
					
				}
		
			}
			
		</script>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我啊" />
		<br /><br />
		
		<div id="hd" style="width: 300px;margin-left: 20px;"></div>
		
		
		
		
	</body>
</html>

3.自动运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin: 0;
			}
			#btn{
				margin: 20px;
			}
			#hd{
				height: 200px;
				background: mediumpurple;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				var hd = document.getElementById("hd");
				
//				给按钮加单击事件
//				btn.onclick = function(){
//					设置定时器,自动改变宽度
					setInterval(function(){
//						获得当前宽度
						var old_width = hd.style.width;
//						计算新宽度
						var new_width = parseInt(old_width)+2;
//						将新宽度赋值回来
						hd.style.width = new_width+'px';
					},50)
				}
//			}
			
//			作业:点击按钮,让元素向右跑
			
		</script>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我啊" />
		<br /><br />
		
		<div id="hd" style="width: 300px;margin-left: 20px;"></div>
		
		
		
		
	</body>
</html>

4.元素向左运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<input type="button" id="btn" value="点我啊" />
		
		<br /><br />
		1
		<img src="xiaohuangya.png" id="pic" width="180" style="position: absolute;left: 20px;top: 50px;" />
		
		
		
		
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			var pic = document.getElementById("pic");
			
			btn.onclick = function(){
				setInterval(function(){
//					获得当前left值
					var old_left = pic.style.left;
//					计算新left值
					var new_left = parseInt(old_left)+20;
//					将新值赋值给元素
					pic.style.left = new_left+'px'
				},500)
			}
			
		</script>
		
		
		
	</body>
</html>

5.运动停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<input type="button" id="btn" value="┏ (゜ω゜)=☞" />
		<input type="button" id="pause" value="停一下!" />
		
		<br /><br />
		
		<img src="xiaohuangya.png" id="pic" width="180" style="position: absolute;left: 20px;top: 50px;" />
		
		
		
		
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			var pic = document.getElementById("pic");
			var pause = document.getElementById("pause");
			
			
			btn.onclick = function(){
				timer = setInterval(function(){
//					获得当前left值
					var old_left = pic.style.left;
//					计算新left值
					var new_left = parseInt(old_left)+2;
//					将新值赋值给元素
					pic.style.left = new_left+'px'
				},50)
			}
			
			
//			暂停按钮加单击事件
			pause.onclick = function(){
//				清理定时器
				clearInterval(timer);
//				或者设置display
//				pic.style.display = 'none';
			}
			
			
		</script>
		
		
		
	</body>
</html>

6.加速运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<input type="button" id="btn" value="┏ (゜ω゜)=☞" />
		
		<br /><br />
		
		<img src="xiaohuangya.png" id="pic" width="180" style="position: absolute;left: 20px;top: 50px;" />
		
		
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			var pic = document.getElementById("pic");
			var speed = 1;
			
			
			btn.onclick = function(){
				timer = setInterval(function(){
//					speed++;
//					加速1.5倍
					speed = speed*1.05;
//					获得当前left值
					var old_left = pic.style.left;
//					计算新left值
					var new_left = parseInt(old_left)+speed;
//					将新值赋值给元素
					pic.style.left = new_left+'px';
				},20)
			}
			
			
			
		</script>
		
		
		
	</body>
</html>

7.元素显隐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		
	<input type="button" id="btn" value="点我啊" />
	<br /><br />
		
	<img src="jinmao.jpg" id="pic" />
		
		
		
	<script type="text/javascript">
		
		var btn = document.getElementById("btn");
		var pic = document.getElementById("pic");
		var sta = 1;//1对应显示状态
		
		
		btn.onclick = function(){
			if (sta==1) {
	//			让图片隐藏
				pic.style.display = 'none';
				sta=2;
			}else if(sta==2){
//				让图片显示
				pic.style.display = 'block';
				sta=1;
			}

		}
		
	</script>
		
		
		
	</body>
</html>

8，来回运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.qiang{
				width: 200px;
				height: 500px;
				background: rgba(0,0,0,0.3);
				position: absolute;
				left: 700px;
				top: 0;
			}
			#pic{
				/*height: 10px;*/
				float: left;
			}
		</style>
	</head>
	<body>
		
		<input type="button" id="btn" value="┏ (゜ω゜)=☞" />
		<br /><br />
		
		<img src="xiaohuangya.png" id="pic" width="180" style="position: absolute;top: 50px;left:100px;" />
		
		<div class="qiang"></div>
		
		
		
		<script type="text/javascript">
			
			var btn = document.getElementById("btn");
			var pic = document.getElementById("pic");
			
			var speed = 5;
			
			
			btn.onclick = function(){
				
				
				setInterval(function(){
					
					var ole_left = pic.style.left;
					var new_left = parseInt(ole_left)+speed;
					pic.style.left = new_left+'px';
					
//					if (new_left==520) {
						alert('撞墙啦');
//						speed = -1*speed;
//					}
//			
//					if (new_left==0) {
//						speed = -1*speed;
//					}
//					
					if (new_left==520 || new_left==0) {
						speed = -1*speed;
					}
							
				},20)
			}
			console.log(pic.style.left)
			
//			作业:一个200*200大小的div,逐渐变大到400*400,然后缩小到200*200,反复执行
			
		</script>
		
		
		
	</body>
</html>

9.鼠标事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 300px;
				background: dodgerblue;
				margin: 30px auto;
			}
		</style>
	</head>
	<body>
		
		
		 <div id="hd"></div>
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
		
//		单击事件
		hd.onclick = function(){
			console.log('单击事件触发了');
		}
		
//		双击事件
		hd.ondblclick = function(){
			console.log('双击事件触发了');
		}
		
		
//		鼠标按下事件
		hd.onmousedown = function(){
			console.log('鼠标按下事件触发了');
		}
		
//		鼠标抬起事件
		hd.onmouseup= function(){
			console.log('鼠标抬起事件触发了');
		}
		
		
//		鼠标移入事件
		hd.onmouseover= function(){
			console.log('鼠标移入事件触发了');
		}
				
		
//		鼠标移出事件
		hd.onmouseout = function(){
			console.log('鼠标移出事件触发了');
		}
				
		
//		鼠标移动事件
//		hd.onmousemove = function(){
//			console.log('鼠标移动事件触发了');
//		}		
		
	</script>
	</body>
</html>

10.dom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后盾人 人人做后盾</title>
		
		<script type="text/javascript">
			
//			获得title标签的内容
			alert(document.title);
			
//			设置title标签的内容
			document.title = '我是新设置的内容';
			
		</script>

11.获得元素的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<div id="">
			<p>后盾人 人人做后盾1</p>
			<p id="two">后盾人 人人做后盾2</p>
			<p class="hd">后盾人 人人做后盾3</p>
			<p id="two" name='houdun' class="hd">后盾人 人人做后盾4</p>
			<p name='houdun' style="color: red;">后盾人 人人做后盾5</p>
			<p class="hd">后盾人 人人做后盾6</p>
			<p name='houdun'>后盾人 人人做后盾7</p>
			<p class="hd">后盾人 人人做后盾8</p>
		</div>
		
	<script type="text/javascript">
//		通过id选择元素
//		var hd = document.getElementById("hd");
//		hd.style.color = 'blue';
//		hd.style.fontSize = '30px';


//		注意:通过标签名/name属性/class属性选元素的时候,返回结果是一个数组,数组存着所有符合条件的元素

//		通过标签名选元素
		var ps = document.getElementsByTagName('p');
		ps[0].style.color = 'blue';
		ps[1].style.color = 'blue';
		ps[2].style.color = 'blue';

//		通过class属性来选择元素
//		var ps = document.getElementsByClassName('hd');

//		通过name属性选元素
//		var ps = document.getElementsByName('houdun');
//		
//		for (var i=0;i<ps.length;i++) {
			比行内样优先级还高
//			ps[i].style.color = 'blue';
//		}
	</script>
		
	</body>
</html>

12.操作元素内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<input type="button" id="btn" value="点我进行操作" />
		<br /><br />
		
		<h1 id="title">后盾人 <span>人人</span>做后盾</h1>
		
	<script type="text/javascript">
		
		var btn = document.getElementById("btn");
		var title = document.getElementById("title");
		
		btn.onclick = function(){
//			获得元素所有的内容(包含标签)
			// var con = title.innerHTML;
			// alert(con);

//			获得纯文本内容
//			document.all用来判断ie和非ie浏览器
			if (document.all) {
	//ie
				var con = title.innerText;
			}else{
// 	//非ie浏览器
				var con = title.textContent;
			}

//			短路兼容性写法
//			var con = title.innerText || title.textContent;

			alert(con);

		}
		
	</script>
		
	</body>
</html>

13.设置新的元素内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<input type="button" id="btn" value="点我进行操作" />
		<br /><br />
		
		<h1 id="title">后盾人 <span>人人</span>做后盾</h1>
		
	<script type="text/javascript">
		
		var btn = document.getElementById("btn");
		var title = document.getElementById("title");
		
		btn.onclick = function(){
//			设置元素内容
			title.innerHTML = '我是新设置的内容';
			
		}
		
	</script>
		
	</body>
</html>

14.倒计时跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>页面在<span id="time">5</span>秒后跳转到后盾人首页</h1>
		
		<script type="text/javascript">
			
			var time = document.getElementById("time");
			
			setInterval(function(){
//				获得span当前内容
				var con = time.innerText || time.textContent;
				var new_con = con-1;
//				将新内容写回去
				time.innerHTML = new_con;
				
				if (new_con==1) {
//					跳转
//					location.href = 'http://houdunren.com';
//					location.assign('http://houdunren.com');
					location.replace('http://houdunren.com');
				}
				
			},1000);
			
		</script>
		
		
	</body>
</html>

15.元素转移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#x{
				width: 400px;
				height: 200px;
				border: 5px solid dodgerblue;
				margin-left: 30px;
			}
			#y{
				width: 400px;
				height: 200px;
				border: 5px solid orangered;
				margin-left: 30px;
			}
			#btn{
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		
		<div id="x">
			后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com <img src="jinmao.jpg" width="100" />
		</div>
		<br /><br />
		
		<input type="button" value="乾坤大挪移" id="btn" />
		
		<br /><br />
		<div id="y"></div>
		
		
	<script type="text/javascript">
		
		var x = document.getElementById("x");
		var y = document.getElementById("y");
		var btn = document.getElementById("btn");
		
		btn.onclick = function(){
//			获得x的内容
//			var con = x.innerHTML;
			将内容设置给y
//			y.innerHTML = con;

			y.innerHTML = x.innerHTML;
//			将x清空
			x.innerHTML = '';
		}
		
	</script>
		
	</body>
</html>

16.元素互相转移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#x{
				width: 400px;
				height: 200px;
				border: 5px solid dodgerblue;
				margin-left: 30px;
			}
			#y{
				width: 400px;
				height: 200px;
				border: 5px solid orangered;
				margin-left: 30px;
			}
			#btn{
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		
		<div id="x">
			后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com后盾人 人人做后盾 www.houdunren.com <img src="jinmao.jpg" width="100" />
		</div>
		<br /><br />
		
		<input type="button" value="乾坤大挪移" id="btn" />
		
		<br /><br />
		<div id="y"></div>
		
		
	<script type="text/javascript">
		
		var x = document.getElementById("x");
		var y = document.getElementById("y");
		var btn = document.getElementById("btn");
		var sta = 1;//1对应内容在上面的状态
		
		btn.onclick = function(){
			if (sta==1) {
				y.innerHTML = x.innerHTML;
				x.innerHTML = '';
				sta = 2;
			}else if(sta==2){
				x.innerHTML = y.innerHTML;
				y.innerHTML = '';
			
				sta = 1;
			}
		}
		
	</script>
		
	</body>
</html>

17.操作元素属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="我是一只按钮" id="btn" />
		<br /><br />
		
		<h1 id="title" class="bt" hd="houdun">后盾人 人人做后盾</h1>
		
	<script type="text/javascript">
		
		var btn = document.getElementById("btn");
		var title = document.getElementById("title");
		
//		元素.属性这种形式只能操作特定属性 ,比如id class href src等等
		
		btn.onclick = function(){
//			获得属性
//			alert(title.id);
//			alert(title.className);
//			alert(title.hd);
			
//			设置元素属性
			title.className = 'wwwwwwwwwwwww';
		}
		
	</script>
	</body>
</html>

18.操作元素任意属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="我是一只按钮" id="btn" />
		<br /><br />
		
		<h1 id="title" class="bt" hd="houdun">后盾人 人人做后盾</h1>
		
		
	<script type="text/javascript">
		
		var btn = document.getElementById("btn");
		var title = document.getElementById("title");
		
//		元素.属性这种形式只能操作特定属性 ,比如id class href src等等
		
		btn.onclick = function(){
//			获得元素任意属性
//			var attr = title.getAttribute('hd');
//			alert(attr);
			
//			设置元素任意属性,
			title.setAttribute('class','wwwwwwwwwwww');
			// title.setAttribute('abc','wwwwwwwwwwww');
		}
		
		
//		作业:
//		1/小松鼠效果(两种切换效果)
//		2/写一个随机点菜的效果
		
		
	</script>
	</body>
</html>

19.实际作用在元素上的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#hd{
				width: 500px;
				height: 300px;
				background: mediumpurple;
			}
		</style>
	</head>
	<body>
		
		<input type="button" id="btn" value="点我�� />
		<br /><br />
		
		<div id="hd"></div>
		
	
		
<script type="text/javascript">
	var btn = document.getElementById("btn");
	var hd = document.getElementById("hd");
	
	btn.onclick = function(){
//				alert(hd.style.width);
//				if (document.all) {//IE
//					var w = hd.currentStyle.width;
//				}else{//非IE
//					var w = getComputedStyle(hd,null).width;
//				}
	
		var w = getComputedStyle(hd,null).width || hd.currentStyle.width;
		
		alert(w);
	}
</script>
		
		
		
	</body>
</html>

20.通过关系找元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<div id="hd"><p>后盾人 人人做后盾0</p><p>后盾人 人人做后盾1</p><p id="two">后盾人 人人做后盾2</p><p>后盾人 人人做后盾3</p><p>后盾人 人人做后盾4</p><p>后盾人 人人做后盾5</p><p>后盾人 人人做后盾6</p><p>后盾人 人人做后盾7</p></div>


<script type="text/javascript">
	
	var hd = document.getElementById("hd");
	var two = document.getElementById("two");
	
//	获得hd中所有的子节点
//	var ps = hd.childNodes;
	获得节点长度
//	document.write(ps.length);
//	ps[1].style.color = 'red';
	
	
//	找元素的父级节点
//	two.parentNode.style.background = 'blue';
	
//	第一个子节点
//	hd.firstChild.style.color = 'blue';
//	hd.lastChild.style.color = 'blue';

//	找兄弟节点
//	two.previousSibling.style.color = 'blue';
//	two.nextSibling.style.color = 'blue';
	
	
</script>



	</body>
</html>

21，节点方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#hd{
				width: 600px;
				border: 4px solid orangered;
			}
		</style>
	</head>
	<body>
		
	<input type="button" id="btn" value="我是按钮" />
		<br /><br />
	
	<h1 id="title">我是h1标签！！！</h1>
	<div id="hd">
		<p>后盾人 人人做后盾0</p>
		<p>后盾人 人人做后盾1</p>
		<p>后盾人 人人做后盾2</p>
		<p>后盾人 人人做后盾3</p>
		<p>后盾人 人人做后盾4</p>
		<p>后盾人 人人做后盾5</p>
		<p>后盾人 人人做后盾6</p>
		<p>后盾人 人人做后盾7</p>
	</div>


<script type="text/javascript">
	
	var btn = document.getElementById("btn");
	var hd = document.getElementById("hd");
	var ps = hd.getElementsByTagName('p');
	var title = document.getElementById("title");
	
	btn.onclick = function(){
//		创建空标签
//		var newp = document.createElement('p');
		追加内容
//		newp.innerHTML = '我是新来的，请多多关照!';
		添加属性
//		newp.setAttribute('class','houdun');
		将新创建的标签追加到hd中
//		hd.appendChild(newp);
//
//		hd.insertBefore(title,ps[2]);
//		
//		删除节点
//		hd.removeChild(ps[2]);

//		替换节点
//		hd.replaceChild(title,ps[2]);

//		复制节点
//		true参数表示完全复制
		var newh1 = title.cloneNode(true);
//		将复制的节点追加到div中
		hd.appendChild(newh1);

	}
	
	
</script>	

	</body>
</html>

22.获得元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#x{
				width: 600px;
				height: 500px;
				border: solid 5px mediumpurple;
				margin: 30px auto;
			}
			#y{
				width: 400px;
				height: 200px;
				background: dodgerblue;
				margin: 40px;
			}
		</style>
	</head>
	<body>
		
		
		<div id="x">
			<div id="y"></div>
		</div>
		
		
	<script type="text/javascript">
		
//		如果是没有定位的元素,offsetLeft和offsetTop获得的是元素距离body左侧和顶部的距离
		
		var y = document.getElementById("y");
		
		console.log(y.offsetLeft);
		console.log(y.offsetTop);
		document.write(y.offsetTop)
		
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#x{
				width: 600px;
				height: 500px;
				border: solid 5px mediumpurple;
				margin: 30px auto;
				position: relative;
			}
			#y{
				width: 400px;
				height: 200px;
				background: dodgerblue;
				position: absolute;
				left: 50px;
				top: 66px;
			}
		</style>
	</head>
	<body>
		
		
		<div id="x">
			<div id="y"></div>
		</div>
		
		
	<script type="text/javascript">
//		有定位属性的元素,offsetLeft和offsetTop就是获得它的left和top值
		
		var y = document.getElementById("y");
		
		console.log(y.offsetLeft);
		console.log(y.offsetTop);
		
	</script>
	</body>
</html>

23.获得元素尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#x{
				width: 600px;
				height: 500px;
				border: solid 5px mediumpurple;
				margin: 30px auto;
				position: relative;
			}
			#y{
				width: 400px;
				height: 200px;
				background: dodgerblue;
				position: absolute;
				left: 50px;
				top: 66px;
			}
		</style>
	</head>
	<body>
		
		
		<div id="x">
			<div id="y"></div>
		</div>
		
		
	<script type="text/javascript">
//		有定位属性的元素,offsetLeft和offsetTop就是获得它的left和top值
		
		var y = document.getElementById("y");
		
		console.log(y.offsetLeft);
		console.log(y.offsetTop);
		
	</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 300px;
				background: mediumpurple;
				margin: 30px auto;
				padding: 10px;
				border: 5px solid orangered;
			}
		</style>
	</head>
	<body>
		
		<div id="hd">
			后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾
		</div>
	
	<script type="text/javascript">
		
//		var hd = document.getElementById("hd");
		获得元素的尺寸
//		var w = hd.offsetWidth;
//		var h = hd.offsetHeight;
//		console.log(w,h);

//		这种形式不能设置宽高
//		hd.offsetWidth = 2000;
	</script>
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 300px;
				background: mediumpurple;
				margin: 30px auto;
				padding: 10px;
				border: 5px solid orangered;
			}
		</style>
	</head>
	<body>
		
		<div id="hd">
			后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾后盾人 人人做后盾
		</div>
	
	<script type="text/javascript">
		
//		var hd = document.getElementById("hd");
		获得元素的尺寸
//		var w = hd.offsetWidth;
//		var h = hd.offsetHeight;
//		console.log(w,h);

//		这种形式不能设置宽高
//		hd.offsetWidth = 2000;
	</script>
		
		
	</body>
</html>

24.获取滚动条元素滚动位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 300px;
				border: 3px solid blue;
				margin: 30px auto;
				overflow: auto;
			}
			#num{
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<h1 id="num">0</h1>
		<div id="hd">
			后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。
		</div>
		
		
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
		var num = document.getElementById("num");
		
//		滚动条事件
		hd.onscroll = function(){
//			获得滚动条的位置
			var t = hd.scrollTop;
//			将内容写到h1中
			num.innerHTML = t;
		}
		
	</script>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 500px;
				height: 1300px;
				border: 3px solid blue;
				margin: 30px auto;
				overflow: auto;
			}
			#num{
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<input type="button" id="btn" value="设置滚动条位置" />
		<div id="hd">
			后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。
		</div>
		
		
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
		var btn = document.getElementById("btn");
		
		btn.onclick = function(){
//			设置滚动条的位置
			hd.scrollTop = 1000;
		}

		
	</script>
		
	</body>
</html>

25.滚动条位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#hd{
				width: 100%;
				height: 940px;
				/* border: 3px solid blue; */
				margin: 0px auto;
				overflow: auto;
			}
			#num{
				text-align: center;
			}
		</style>
	</head>
	<body style="overflow-x:hidden;overflow-y:hidden">
		<input type="button" id="start" value="开始阅读/暂停" />
		<div id="hd">
			
		

		
		
			后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。

做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。
</div>
		</body>
		
		
	<script type="text/javascript">
		
		var start = document.getElementById("start");
		var pause = document.getElementById("pause");
		var hd = document.getElementById("hd");
		var sta = 1;
//		开始阅读
		start.onclick = function(){
			if(sta==1){
			timer = setInterval(function(){
//				获得当前滚动条的位置
				var old_top = hd.scrollTop;
//				计算新位置
				var new_top = old_top-4;
//				将新值赋值回去
				hd.scrollTop = new_top;
				// 只能判断创建的元素,不能判断scrollTop
				if(new_top==100){
					clearInterval(timer);
				}
				sta=2;
			},1)
			}
//			暂停阅读
		else if(sta==2){
//			清理定时器
			clearInterval(timer);
		}
		sta=1;
		}
		
		
//		
		
	</script>
		
	
</html>

26.滑动到底部提醒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>滚动条滚动事件</title>
	</head>
	<style>
		body,html{
			height: 98%;
		}
		.tabshow1{
			border: 1px #F00 solid;
			height: 100%;
			overflow: auto;
		}
		.tabshow1 > .tabScroll{
			border: 1px #CCC solid;
			height: 2.5em;
			margin: 10px;
			text-align: center;
			line-height: 2.5em;
			font-family: "微软雅黑";
		}
	</style>
	<body>
		<div class="tabshow1" id="tab">
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
			<div class="tabScroll">滚动条</div>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("tab").addEventListener("scroll",function() {
			var tabView = document.getElementById("tab");
			var contentHeight = tabView.scrollHeight, //内容高度
			scrollTop = tabView.scrollTop; //滚动高度
			viewHeight = tabView.clientHeight;
			console.log(viewHeight)
			console.log(scrollTop)
			console.log(contentHeight)
			
		    // if ((scrollTop / (contentHeight - viewHeight)) == 1 ) {
			// 滚动到底部滚动条=全部区域高度(包括可滚动外面的区域)减去可视区域(不包括可滚动外面的区域)
		    if (scrollTop == (contentHeight - viewHeight)) {
		    	//到达底部10px时,加载新内容
				alert("滚动条到底部");
		    }
		},false);
	</script>
</html>
--------------------- 
版权声明：本文为CSDN博主「Borther-Cola」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/China_Guanq/article/details/76527500

27.获取事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#hd{
				width: 500px;
				height: 300px;
				background: mediumpurple;
				margin: 30px auto;
				position: relative;
			}
			
		</style>
	</head>
	<body>
		
		
		<div id="hd"></div>
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
		hd.onmousemove = function(e){
//			alert('后盾人 人人做后盾');
//			获得兼容的事件对象
			var ev = window.event || e;
//			获得鼠标距离body左侧和顶部的距离
//			console.log(ev.clientX,ev.layerY);
			
//			获得鼠标距离事件源的位置
			var l = ev.offsetX || ev.layerX;
			var t = ev.offsetY || ev.layerY;
			console.log(l,t);
			
		}
		
	</script>
	</body>
</html>

28.tab切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#tab{
				width: 600px;
				height: 500px;
				border: 4px solid orangered;
				margin: 30px auto;
				position: relative;
			}
			#tab ul li{
				float: left;
				width: 200px;
				height: 50px;
				list-style: none;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
				color: white;
			}
			#tab .con{
				width: 580px;
				height: 420px;
				position: absolute;
				left: 10px;
				top: 70px;
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div id="tab">
			
			<ul>
				<li style="background: dodgerblue;">新闻</li>
				<li style="background: orchid;">体育</li>
				<li style="background: forestgreen;">娱乐</li>
			</ul>
			
			<div class="con" style="background: dodgerblue;display: block;"></div>
			<div class="con" style="background: orchid;"></div>
			<div class="con" style="background: forestgreen;"></div>
			
		</div>
		
		
	<script type="text/javascript">
		
		var tab = document.getElementById("tab");
		var lis = tab.getElementsByTagName('li');
		var cs = tab.getElementsByClassName('con');
		
//		循环给每个li加鼠标移入事件和序号
		for (var i=0;i<lis.length;i++) {
			lis[i].xuhao = i;
			lis[i].onmouseover = function(){
//				获得当前移入的li的序号,因为不在同一函数上所以要用this,而不是直接用
				var c = this.xuhao;
//				让所有con隐藏
				for (var y=0;y<3;y++) {
					cs[y].style.display = 'none';
				}
//				让c号con显示
				cs[c].style.display = 'block';
			}
		}
		
		
	</script>
		
		
	</body>
</html>

进级版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#tab{
				width: 600px;
				height: 500px;
				border: 4px solid orangered;
				margin: 30px auto;
				position: relative;
			}
			#tab ul li{
				float: left;
				width: 200px;
				height: 50px;
				list-style: none;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
				color: red;
				position: absolute;
				/*top: 100px;
				left: 100px;*/
				/*background: dodgerblue;*/
			}
			#tab ul li.x{
				left: 200px;
			}
			#tab ul li.c{
				left: 400px;
			}
			#tab .con{
				width: 580px;
				height: 420px;
				position: absolute;
				left: 10px;
				top: 70px;
				display: none;
			}
			#tab .co{
				width: 600px;
				height: 50px;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 0;
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div id="tab">
			<div class="co" style="background: dodgerblue;display: block;"></div>
			<div class="co" style="background: orchid;"></div>
			<div class="co" style="background: forestgreen;"></div>
			
			<ul>         			
				<li class="z">新闻</li>
				<li class="x">体育</li>
				<li class="c">娱乐</li>
			</ul>
			
			<div class="con" style="background: dodgerblue;display: block;"></div>
			<div class="con" style="background: orchid;"></div>
			<div class="con" style="background: forestgreen;"></div>
			
		</div>
		
	<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		var tab = document.getElementById("tab");
		var lis = tab.getElementsByTagName('li');
		var cs = tab.getElementsByClassName('con');
		var co = tab.getElementsByClassName('co')
		
//		循环给每个li加鼠标移入事件和序号
		for (var i=0;i<lis.length;i++) {
			lis[i].xuhao = i;
			lis[i].onmouseover = function(){
//				获得当前移入的li的序号
				var c = this.xuhao;
//				让所有con隐藏
				for (var y=0;y<3;y++) {
					cs[y].style.display = 'none';
					co[y].style.display = 'none';
				}

//				让c号con显示
				cs[c].style.display = 'block';
				co[c].style.display = 'block';
//				$("#tab li").css({'background':'black'});
//				$("#tab li:first").css({'background':'black'});
//				无法传进c
//				$("#tab li:eq(c)").css({'background':'black'});
				console.log(c)
			}
		}
		
		
	</script>
		
		
	</body>
</html>

29.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
		
//		键盘事件往往绑定给window对象
//		window.onkeydown = function(){
//			console.log('键盘被按下');
//		}
//
//		window.onkeyup = function(){
//			console.log('键盘被抬起');
//		}
		
		
//		任何数字字母键被按下并抬起会触发onkeypress事件
		window.onkeypress = function(){
			console.log('按下并抬起了数字或字母键');
		}
		
		
	</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
		
//		键盘事件往往绑定给window对象
		window.onkeydown = function(e){
			var ev = window.event || e;
//			键盘码
			// console.log(ev.keyCode);
			console.log(String.fromCharCode(ev.keyCode));
		}

		
		

		
		
	</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">
		
//		键盘事件往往绑定给window对象
		window.onkeydown = function(e){
			var ev = window.event || e;
			console.log(ev.ctrlKey);
			console.log(ev.shiftKey);
			console.log(ev.altKey);
		}

		
		

		
		
	</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript">


		window.onkeydown = function(e){
			var ev = window.event || e;
//			判断同时按下ctrl和回车键
			if (ev.ctrlKey && ev.keyCode==13) {
				alert('提交内容');
			}
		}

		
		
	</script>
	</head>
	<body>
	</body>
</html>

30.打字游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
				font-size: 160px;
				float: left;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		
		<ul id="hd">
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
			<li>E</li>
		</ul>
		
<script type="text/javascript">
	var hd = document.getElementById("hd");
	var str = 'QWERTYUIOPASDFGHJKLZXCVBNM';
	
	
	window.onkeydown = function(e){
		var ev = window.event || e;
//			获得按下的键
		var key = String.fromCharCode(ev.keyCode);
//			获得所有li标签
		var ls = hd.getElementsByTagName('li');
//		循环所有li
		for (var i=0;i<ls.length;i++) {
			if (ls[i].innerHTML==key) {
//				删掉i号li
				hd.removeChild(ls[i]);
//				随机数
				var rand = Math.floor(Math.random()*(str.length-1+1-0)+0);
				创建一个新的li标签
				var newli = document.createElement('li');
				newli.innerHTML = str[rand];
//				将新li追加到ul中,不可以追加任意元素，必须经过处理。
				hd.appendChild(newli);
				
				break;//退出循环,不会删两个，只会执行一次.没有break的话,可能会循环多次
			}
		}
	}
</script>
	</body>
</html>

31.阻止表单提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			form{
				margin: 40px;
			}
		</style>
	</head>
	<body>
		
		
		<form id="f" action="a.php" method="post">
			名字： <input type="text" id="uname" />
			<br /><br />
			密码： <input type="password" />
			<br /><br />
			<input type="submit" value="点我提交"/>
		</form>
	
	<script type="text/javascript">
		
	
		var f = document.getElementById("f");
		//尽量不要用name命名
		var uname = document.getElementById("uname");
		
//		onsubmit会在表单提交之前执行
		f.onsubmit = function(e){
//			获得时间对象
			var ev = window.event || e;
//			alert(name.value);
//			alert('表单要提交！');
			if (uname.value.length<6) {
				alert('你的内容长度小于6，不能提交！');
//				按提交键后会提交内容，所以阻止表单的默认提交动作
				if (document.all) {
					ev.returnValue = false; 
				}else{
					ev.preventDefault();
				}
			}
		}
		
	</script>
	
	
		
	</body>
</html>

32.获得表单焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" id="hd" />
		<textarea id="t"></textarea>
		
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
		var t = document.getElementById("t");
		
		
//		获得焦点事件
		hd.onfocus = function(){
			console.log('获得焦点');  
		}
		
//		失去焦点事件
		hd.onblur = function(){
			console.log('失去焦点');
		}
		
//		内容发生变化,并且失去焦点的时候,会触发
		t.onchange = function(){
			console.log('onchange事件触发');
		}
		
		
		
	</script>
		
		
	</body>
</html>

33.事件流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#beijing{
				width: 700px;
				height: 500px;
				background: dodgerblue;
				margin: 30px;
			}
			#chaoyang{
				width: 500px;
				height: 300px;
				background: orangered;
				margin: 30px;
			}
			#shunbailu{
				width: 400px;
				height: 230px;
				background: lightgreen;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		
		<div id="beijing">
			北京
			<div id="chaoyang">
				朝阳区
				<div id="shunbailu">
					顺白路
				</div>
			</div>
		</div>
		
	<script type="text/javascript">
		
		
//		冒泡型事件流: 从离鼠标最近的元素到最远的元素依次触发
		
		document.getElementById("beijing").onclick = function(){
			alert('北京');
		}
		
		document.getElementById("chaoyang").onclick = function(e){
			alert('朝阳');
			var ev = window.event || e;
//			阻止事件流
			if (document.all) {
				ev.cancelBubble=true; 
			}else{
				ev.stopPropagation();
			}
		}
		
		document.getElementById("shunbailu").onclick = function(){
			alert('顺白路');
			var ev = window.event || e;
//			阻止事件流
			if (document.all) {
				ev.cancelBubble=true; 
			}else{
				ev.stopPropagation();
			}
		}
		
	</script>	
	
	
	</body>
</html>

34.阻止a标签跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<a href="http://houdunren.com" id="link">后盾人</a>
		
		
		<script type="text/javascript">
			
			document.getElementById("link").onclick = function(e){
				alert('后盾人 人人做后盾');
				var ev = window.event || e;
//				阻止浏览器默认行为
				if (document.all) {
					ev.returnValue = false; 
				}else{
					ev.preventDefault(); 
				}
			}
			
		</script>
	</body>
</html>

35.this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			#hd{
				width: 500px;
				height: 300px;
				background: dodgerblue;
				margin: 30px auto;
			}
		</style>
	</head>
	<body>
		
		<div id="hd"></div>
		
	<script type="text/javascript">
		
		var hd = document.getElementById("hd");
//		this指向的是触发事件的时候的事件源
		hd.onclick = function(){
//			hd.style.background = 'orangered';
			this.style.background = 'orangered';
		}
	</script>
	
	</body>
</html>

36.圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#hd{
				width: 500px;
				height: 500px;
				background: mediumpurple;
				margin: 30px auto;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		
		<div id="hd">
			
		</div>
		
	</body>
</html>

37.日期，时间
创建时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<script type="text/javascript">
			
//			创建当前时间
//			var time = new Date();

//			js中的月份是0-11
			
//			创建指定时间
			var time = new Date(2025,0,1,0,0,0);

			console.log(time.getFullYear());
			console.log(time.getMonth());
			console.log(time.getDate());
			console.log(time.getDay());
	
//			修改相关信息
			time.setMonth(2);
			time.setFullYear(2022);
			document.write(time);
			
			
		</script>
		
		
	</body>
</html>

当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 id="t">当前时间是：<span></span>年<span></span>月<span></span>日<span></span>时<span></span>分<span></span>秒</h1>
		
	<script type="text/javascript">
		
		
		var ss = document.getElementById("t").getElementsByTagName('span');
		
		function changetime(){
			var time = new Date();
			ss[0].innerHTML = time.getFullYear();
			ss[1].innerHTML = time.getMonth()+1;
			ss[2].innerHTML = time.getDate();
			ss[3].innerHTML = time.getHours();
			ss[4].innerHTML = time.getMinutes();
			ss[5].innerHTML = time.getSeconds();
		}
		
		
		changetime();
		
		setInterval(function(){
			
			changetime();
			
		},1000)
		
	</script>
		
		
		
		
	</body>
</html>

距离倒计的时间（毫秒）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		
		<script type="text/javascript">
			
			var time2022 = new Date(2022,0,1,0,0,0);
			
//			获得日期和时间参考点1970之间相差的毫秒数
			document.write(time2022.getTime());
			
			
			
		</script>
		
	</body>
</html>

倒计时效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 id="t">距离2022年元旦还有 <span></span>天<span></span>小时<span></span>分钟<span></span>秒</h1>
		
		
		
		<script type="text/javascript">
			
//			倒计时函数
			function djs(){
				var timenow = new Date();
				var time2022 = new Date(2022,0,1,0,0,0);
				
	//			获得到2022年之间的时间差
				var diff = time2022.getTime() - timenow.getTime();
//				document.write(diff);
	
	//			计算天数
				var days = parseInt(diff/(24*60*60*1000));
	//			document.write(days);
	//			获得计算完天数后还剩余的毫秒数
				diff = diff%(24*60*60*1000);
	//			计算小时
				var hours = parseInt(diff/(60*60*1000));
	//			获得计算完小时后还剩余的毫秒数
				diff = diff%(60*60*1000);
	//			计算分钟
				var minutes = parseInt(diff/(60*1000));
	//			计算分钟后还剩余的毫秒数
				diff = diff%(60*1000);
				var secondes = parseInt(diff/1000);
				
				var ss = document.getElementById("t").getElementsByTagName('span');
				ss[0].innerHTML	 = days;
				ss[1].innerHTML	 = hours;
				ss[2].innerHTML	 = minutes;
				ss[3].innerHTML	 = secondes;
			}
			
			djs();
			
			setInterval(djs,1000);
			
		</script>
		
	</body>
</html>

38.递归函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
	<script type="text/javascript">
		
	//递归函数:在函数内部自己调用自己的函数
//	阶乘: 
//	6! 6*5*4*3*2*1
//	7! 7*6*5*4*3*2*1
//	x x*(x-1的阶乘)
	
	
//	foo是计算阶乘的函数
	function foo(x){
		if (x==1) {
			return 1;
		}
		return x*foo(x-1);
	}
//	5*(4*(3*(2*(1))))
	console.log(foo(5));
		
		
		
		
//	李雷  张三  李四  王五  赵六  韩梅梅

//	foo(5){
//		return 5*foo(4){
//			return 4*foo(3){
//				return 3*foo(2){
//					return 2*foo(1){
//						return 1;
//					};
//				}
//			}
//		}
//	}


	</script>
		
		
		
	</body>
</html>

liaojuajun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript小效果

1.获得和设置行内样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin: 0; } #btn{ margin: ...
复制链接

扫一扫