WEB前端笔记3——JavaScript案例

最新推荐文章于 2021-03-17 22:46:20 发布

岩流

最新推荐文章于 2021-03-17 22:46:20 发布

阅读量222

点赞数

分类专栏： HTML 文章标签： javaWEb

本文链接：https://blog.csdn.net/weixin_43470419/article/details/89212407

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

0 总述

我太懒了我太懒了我太懒了啊啊啊啊啊啊啊啊啊啊啊
4/11/2019

0.1 地图

1 JS概述

JS开发：是一门脚本语言，有浏览器来解释执行，不需要经过编译；
JS声明变量：var 变量的名字；
JS声明函数：function name(){}
JS开发的步骤：
- 1.确定事件
- 2.事件触发函数，声明函数
- 3.函数里面通常做一些交互操作：弹框、修改页面内容、动态添加内容

2 轮播图片自动播放的技术实现

2.1 分析

2.1.1 需求

有一组图，每隔三秒自动切换。

2.1.2 定时器

window.setInterval("alert('nihao')",2000);	//每隔响应的毫秒数调用语句，("调用的语句或函数",等待的毫秒数)，返回定时器的ID
window.setTimeout("alert('wohao')",2000);	//隔响应的毫秒数后调用语句，("调用的语句或函数",等待的毫秒数)，返回定时器的ID
window.clearInterval(TimerID);	
window.clearTimeout(TimerID);	
//window是最底层的对象，所以可以省略window直接调用

<html>
	<head>
		<script type="text/javascript">
			var timerId;
			function startTimer(){
				timerId = setInterval("alert('你好')",3000);
			}
			function stopTimer(){
				clearInterval(timerId);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始定时器" onclick="startTimer()">
		<input type="button" value="取消定时器" onclick="stopTimer()">
	</body>
</html>

2.1.3 步骤分析：

确定事件：文档加载完成的事件：onload<body>中
事件要触发：init()
函数里面要做一些事情：
1. 开启定时器：执行切换图片的函数 changeImg()
changeImg()
1. 获得要切换图片的元素

2.2 实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自动轮播图</title>
		<script type="text/javascript">
			var index = 0;
			
			function changeImg(){
				var imgs = document.getElementById("i1");
				if(index === 0){
					imgs.src="../img/65.JPG";
					index++;
				}else if(index === 1){
					imgs.src="../img/344.JPG";
					index++;
				}else{
					imgs.src="../img/C874BB7D6ACE2DB4B500480623FB4117.png";
					index = 0;
				}
			}
			function init(){
				setInterval("changeImg()",1000);
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/C874BB7D6ACE2DB4B500480623FB4117.png" width="500"id="i1"/>
	</body>
</html>

3 页面定时弹出广告

3.1 分析

3.1.1 需求

打开网页，弹出广告，3秒后消失。

3.1.2 技术分析

定时器
显示广告：img.style.display="block"
隐藏广告：img.style.display="none"

3.1.3 步骤分析

确定事件：页面加载完成的事件onload
事件触发函数init()
init()函数里面启动定时器：setTimeout(“img.style.none”，5000)；

3.2 实现

<html>
	<head>
		<script type="text/javascript">
			function init(){
				setTimeout("hide()",3000);
			}
			function hide(){
				var img = document.getElementById("ii1");
				img.style.display="none";
			}
		</script>
	</head>
	<body onload="init()">
		<img src="../img/2018-06-20_20-19-28-000.jpg" id="ii1" >
	</body>
</html>

4 JS表单校验

4.1 技术分析

onfocus：获得焦点事件
onblur：失去焦点事件
onkeyup：在键盘按键被松开时发生-事件
表单的提交事件
“return functionName()”;
特点：需要返回值，false true.返回false不提交，返回true提交表单。

4.1.1 需求

4.1.2 步骤

4.1 实现

<html>
	<head>
		<script>
			function showTips(){
				var span1 = document.getElementById("span_username");
				span1.innerHTML="<font color='grey'' size='1'>用户名不得小于6位</font>";
			}
			function checkOut(){
				var username = document.getElementById("username").value;
				var span1 = document.getElementById("span_username");
				if(username.length < 6){
					span1.innerHTML="<font color='grey'' size='1'>太短了</font>";
				}else{
					span1.innerHTML="<font color='green' size='1'>可用</font>";
				}
			}
		</script>
	</head>
	<body>
		<div>
			<form action="..." onsubmit="return checkOut()">
			用户名：<input type="text" id="username" onfocus="showTips()" onkeyup="checkOut()"/>
			<span id="span_username"></span>
			<br />
			<input type="submit" value="提交"/></div>
			</form>
		</body>
	</body>
</html>

5 上部分总结

5.1 定时器:

setInterval(“test()”,3000) 每隔多少毫秒执行一次函数

setTimeout(“test()”,3000) 多少毫秒之后执行一次函数

timerID 上面定时器调用之后

clearInterval()

clearTimeout()

5.2切换图片

img.src = “图片路径”

5.3 事件: 文档加载完成的事件 onload事件

显示广告 : img.style.display = “block”

隐藏广告: img.style.display =“none”

5.4 引入一个外部js文件

<script src="js文件的路径"  type="text/javascript"/>

5.5 表单校验中常用的事件:

获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup

5.6 JS开发步骤

1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互:  点击, 修改图片,  动态修改innerHTML属性...  innerTEXT

6 表格的隔行换色

6.1 需要用到的事件

onload
table对象中的rows[]数组：包含了所有行的数组

6.2 实现

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		/*
		1. 确定事件：文档加载完成onload
		2.事件调用函数init()
		3.函数：操作页面元素
		*/
			function init(){
				var tab = document.getElementById("tab");
				var rows = tab.rows;
				for(var i=1; i< rows.length ;i++){
					var row = rows[i];
					if(i%2 == 1){
						row.bgColor="gray";
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600pxZ" id="tab">
		</table>
	</body>
</html>

7 表格的全选和全不选

7.1 需要用到的事件

input 对象的type=“checkbox” ，事件checked=“checked”
input 对象的type=“checkbox” ，onclick点击事件中添加函数
document.getElementsByName("");，通过name事件查找对象数组
table.rows，通过表格对象的rows方法返回对象数组

7.2 步骤分析

1.确定事件onclick 单击事件
2.事件触发函数checkAll()
3.函数完成表格的全选

7.3 实现

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		/*
		1. 确定事件：文档加载完成onload
		2.事件调用函数init()
		3.函数：操作页面元素
		*/
			function init(){
				var tab = document.getElementById("tab");
				var rows = tab.rows;
				for(var i=1; i< rows.length ;i++){
					var row = rows[i];
					if(i%2 == 1){
						row.bgColor="gray";
					}
				}
			}
			
			function iclick(){
					var check = document.getElementById("allcheck");
					var checked = check.checked;
					var checks = document.getElementsByName("checks");
					
					for(i = 0;i<checks.length;i++){
						checks[i].checked = checked;
					}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600pxZ" id="tab">
			<tr>
				<td>
					<input type="checkbox" onclick="iclick()" id="allcheck"/>
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>...</tr>
		</table>
	</body>
</html>

8 select下拉框的省市联动

8.1 技术分析(DOM)

DOM：Document Object Model:管理HTML元素的增删改查规则
document下包含了html的各个标签（元素element），通过树状结构保存。（如：document—html—head—title）
标签（元素）中的为属性（Attribute）。如（img—src）
被标签包围的是文本。
元素（Element）、属性（Attribute）、文本（Text）都可称为节点。
p.s

文本节点和字符串不同；
event事件也是属性之一

8.1.1 一些常用的 HTML DOM 方法

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点

8.1.2 DOM操作：动态添加节点`<p>文本内容</p>`

<html>
	<head>
		<script type="text/javascript">
			function dianwo(){
			
				//获取div节点
				var div = document.getElementById("div1");
				var p = document.createElement("p");
				var textNode = document.createTextNode("文本内容");
				
				p.appendChild(textNode);
				div.appendChild(p);
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="dianwo()" value="点我添加文本"/>
		<div id="div1"></div>
	</body>
</html>

8.2 需要用到的事件

select标签和option标签
select元素的onchage事件
select元素的options数组，保存了select元素下的option元素，调用options.length=0可清楚select下的所有option元素

8.3 实现

<html>
	<head>
		<script>
			var provinces = [
				["杭州市","湖州市","嘉兴市","绍兴市"],
				["厦门市","福州市","莆田市","漳州市"],
				["西安市","咸阳市","延安市","渭南市"]
				];
			function dianwo(){
				var province = document.getElementById("province");		//获取省份框元素
				var value = province.value;								//获取省份值
				var cities = provinces[value];							//获取城市数组

				var citiesSelect = document.getElementById("city");		//获取城市框元素
				citiesSelect.options.length=0;							//将城市框中原有的选项清空
				
				for(var i = 0;i<cities.length;i++){
					var textNode = document.createTextNode(cities[i]);
					var city = document.createElement("option");
					city.appendChild(textNode);
					citiesSelect.appendChild(city);
				}
			}
		</script>
	</head>
	<body>
		<select onchange="dianwo()" id="province">
			<option value="-1">--请选择--</option>
			<option value="0">浙江省</option>
			<option value="1">福建省</option>
			<option value="2">陕西省</option>
		</select>
		<select id="city">
			<option>请选择</option>
		</select>
	</body>
</html>

9 商品的左右选择

9.1 需要用到的

select元素的multiple属性，多选框
option.selected：被选中事件
循环遍历的同时需要操作数组：从后往前遍历即可

9.2 步骤分析

1.确定事件onclick 单击事件
2.事件触发函数selectOne()&selectAll();
3.函数完成

9.3 实现

<!DOCTYPE html>
<html>
	<head>
		<script>
			function selectOne(){
				var options = document.getElementById("leftSelect").options;
				var rightSelect = document.getElementById("rightSelect");
				for(var i = options.length-1;i>=0;i--){
					var option1 = options[i];
					
					if(option1.selected){
						rightSelect.appendChild(option1);
					}
				}
			}
			
			function selectAll(){
				var options = document.getElementById("leftSelect").options;
				var rightSelect = document.getElementById("rightSelect");
				for(var i = options.length-1;i>=0;i--){
					var option1 = options[i];
					rightSelect.appendChild(option1);
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" width="300px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<div style="float : left">
						已有商品<br/>
						<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
							<option>huawei</option>
							<option>xiaomi</option>
							<option>smartisan</option>
							<option>oppo</option>
							<option>vivo</option>
						</select><br />
						<a href="#" onclick="selectOne()">&gt;&gt;</a><br />
						<a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
					</div>
					<div style="float:right">
						未有商品<br/>
						<select multiple="multiple" id="rightSelect">
							<option>iPhone</option>
							<option>HTC</option>
							<option>nokia</option>
							<option>SONY</option>
						</select><br />
						<a href="#">&lt;&lt;</a><br />
						<a href="#">&lt;&lt;&lt;</a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" value="提交"/></td>
			</tr>
		</table>
	</body>
</html>

岩流

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB前端笔记3——JavaScript案例

0 总述我太懒了我太懒了我太懒了啊啊啊啊啊啊啊啊啊啊啊 4/11/20190.1 地图1 JS概述JS开发：是一门脚本语言，有浏览器来解释执行，不需要经过编译；JS声明变量：var 变量的名字；JS声明函数：function name(){}JS开发的步骤：1.确定事件2.事件触发函数，声明函数3.函数里面通常做一些交互操作：弹框、修改页面内容、动态添加内容...
复制链接

扫一扫