当前位置:   article > 正文

JavaWeb——【JS】——一篇文章学会JS,带案例_java web作业js

java web作业js

JS


1.JavaScript简介

JavaScript:简写js,文件的后缀名也是xxx.js
js是基于对象和事件驱动的脚本语言,作用在客户端(浏览器)上。
js的特点:

  • 交互性(信息的动态交互)
  • 安全性(不可以访问本地的硬盘)
  • 跨平台性(因为浏览器就可以解析js的文件)

JavaScript和Java区别(一点关系没有,好比雷锋和雷峰塔)

JS的基于对象,Java是面向对象。
Js解析就可以执行,Java先编译再执行。
Js是弱类型的语言,Java是强类型语言。

2.JavaScript入门

HTML 中的脚本必须位于 <script></script>标签之间。
脚本可被放置在 HTML 页面的 <body><head>部分中。

2.1.script 标签

如需在 HTML 页面中插入 JavaScript,需要使用 <script> 标签。
<script></script> 会告诉 JavaScript 在何处开始和结束,标签内编写 JavaScript代码

简单示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			alert("Hello JavaScript");
		</script>
	</head>
	<body>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

以上代码,浏览器会解析并执行位于 <script></script> 之间的 JavaScript代码
alert()的效果为提示一个弹出框
<script>标签也可以放到body中

2.2.JavaScript 输出

JavaScript 没有任何打印或者输出的函数。
虽然没有输出语句,但是JavaScript可以通过以下方法输出数据:

  • 1.使用 window.alert() 弹出警告框。
  • 2.使用 document.write() 方法将内容写到 HTML 文档中。
  • 3.使用 innerHTML 写入到 HTML 元素。
  • 4.使用 console.log() 写入到浏览器的控制台。

write

<script>
	document.write(Date());
</script>
  • 1
  • 2
  • 3

2.3.JavaScript的语法

2.3.1.关键字

在这里插入图片描述

2.3.2.标识符

JavaScript语言中标识符的命名规则

  • 1.区分大小写,Myname与myname是两个不同的标识符。
  • 2.标识符首字符可以是以下划线、美元符或者字母开始,不能是数字。
  • 3.标识符中其它字符可以是下划线、美元符 、字母或数字组成的。
    例如:
    userName,User_Name,_sys_val,身高,$change等均为合法的标识符
    而2mail,room#,class为非法的标识符。
    其中,使用中文“身高”命名的变量是合法的。
2.3.3.注释
  • 1.文档注释
    /** 文档注释内容 */
  • 2.多行注释
    /* 多行注释 */
  • 3.单行注释
    //
2.3.4.变量

变量是用于存储信息的"容器"。

声明变量
使用一个关键字var
var x; // x 为 undefined
赋值
x = 5;
也可以定义时直接赋值
var x = 5;

重新声明JavaScript变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 x 的值依然是 5:
var x = 5; // 现在 x 为数字
var x;

代码示例

<script>
	var x = 5;
	var y = 6;
	var z = x + y;
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
2.3.5.数据类型

字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

JavaScript 动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
  • 1
  • 2
  • 3

JavaScript 字符串
字符串是存储字符(比如 “Hello”)的变量。
可以使用单引号或双引号:

var name1="lisi";
var name2='wangwu';
  • 1
  • 2

JavaScript 数字类型
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
  • 1
  • 2

JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。

var x=true;
var y=false;
  • 1
  • 2

JavaScript 数组

var cars=new Array();
cars[0]="lisi";
cars[1]="wangwu";
cars[2]="zhaoliu";

var cars=new Array("lisi","wangwu","zhaoliu");
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JavaScript 对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。

JavaScript Undefined 和 null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量

var person;
var car="Volvo";
  • 1
  • 2

2.4.JavaScript变量作用域

2.4.1.局部变量

在JavaScript函数内部声明的变量(使用var)是局部变量,只能在函数内部访问它,并且该变量的作用域是局部的。
代码示例

//局部变量
// 此处不能调用 name 变量
function fun() {
	var name = "LiSi";
	// 函数内可调用 name 变量
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
2.4.2.全局变量

在函数外声明的变量是全局变量,页面上所有的脚本和函数都能够访问它。

代码示例

var name = "LiSi";
// 此处可调用 name 变量
function fun2() {
    // 函数内可调用 name 变量
}
  • 1
  • 2
  • 3
  • 4
  • 5

向未声明的JavaScript变量分配值
如果把值赋给尚未声明的变量,该变量将自动作为全局变量声明
如语句:

name = "李四";
  • 1

将声明一个全局变量name,即使它在函数内执行。
代码示例

// 此处可调用 name 变量
function fun3() {
    name = "LiSi";
    // 此处可调用 name 变量
}
  • 1
  • 2
  • 3
  • 4
  • 5
2.4.3.变量生命周期

局部变量:在函数运行后会删除
全局变量:在页面关闭后会删除
另外需要注意:函数参数是局部变量

2.5.JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块,或者完成某个特定功能的代码块。
在JS中称为函数,在Java中称为方法,严格意义上来说函数和方法没有任何区别

2.5.1.JavaScript 函数语法

函数就是包裹在花括号中的代码块,前面使用了关键词 function

function funName() {
	//执行代码
}
  • 1
  • 2
  • 3
2.5.2.调用函数
2.5.2.1.调用无参函数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1() {
				alert("hello world");
			}
		</script>
	</head>
	<body>
		<button onclick="fun1()">点我点我</button>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

上面示例,新建了一个名为fun1的函数,函数里使用alert显示弹窗,
在body里添加了一个按钮,并设置按钮的onclick点击事件,点击后调用fun1函数

2.5.2.2.调用带参的函数

在调用函数时,可以向其传递参数值,这些值被称为参数。
这些参数可以在函数中使用。多个函数由逗号 (,) 分隔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(var1, var2) {
				alert("接受到传递过来的参数:" + var1 + var2);
			}
		</script>
	</head>
	<body>
		<button onclick="fun1('李四',55)">点我点我</button>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

上面代码,新建了带两个参数的fun1函数,添加一个按钮,添加点击事件,调用fun1函数,传递两个值

2.5.2.3.调用带有返回值的函数

在使用 return 语句后,函数会停止执行,并返回指定的值。
语法,下面函数会返回值5

function myFunction() {
		var x = 5;
		return x;
}
  • 1
  • 2
  • 3
  • 4

代码示例
编写一个函数,实现求和功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function sum(a, b) {
				return a + b;
			}
			function getValue() {
				//value 的值是 30,也就是函数sum返回的值
				var value = sum(10, 20);
				alert(value);
			}
		</script>
	</head>
	<body>
		<button onclick="getValue()">点我点我</button>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

2.6.JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

2.6.1.HTML事件

HTML 事件可以是浏览器行为,也可以是用户行为。
以下是 HTML 事件的实例:

  • 1.HTML 页面完成加载
  • 2.HTML input 字段改变时
  • 3.鼠标移动到元素上时
  • 4.提交HTML表单时
  • 5.当输入字段被改变时
  • 6.HTML 按钮被点击
2.6.1.1.点击事件(onclick)

通常,当事件发生时,你可以做些事情,例如在页面上添加一个H1标签,点击便签使其文本改变,关键代码如下:
<h1 onclick="this.innerHTML = '谢谢!'">点我改变!</h1>

也可以使用函数的方式,关键代码如下

<body>
	<script>
		function changetext(id) {
			id.innerHTML = "谢谢!";
		}
	</script>
	//this传递过去的是自身
	<h1 onclick="changetext(this)">点我改变!</h1>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
2.6.1.2.onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

代码示例

<body onload="checkCookies()">
	<script>
		function checkCookies() {
			if(navigator.cookieEnabled == true) {
				alert("Cookies 可用")
			} else {
				alert("Cookies 不可用")
			}
		}
	</script>
	<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
2.6.1.3.onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入框内容时,会调用 upperCase() 函数,将输入框内容转为大写。
代码示例

<!DOCTYPE html>
<html>
	<head>
		<script>
			function myFunction() {
				var x = document.getElementById("fname");
				x.value = x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
		<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
2.6.1.4.onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

代码示例,使用onmouseover和onmouseout方法,div内无鼠标时显示【把鼠标移上去】,鼠标移到div内时,显示【谢谢】

<body>
	<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#0000FF;width:120px;height:20px;padding:40px;color:#FFFFFF;">把鼠标移到上面</div>
	<script>
		function mOver(obj) {
			obj.innerHTML = "谢谢"
		}
		function mOut(obj) {
			obj.innerHTML = "把鼠标移上去"
		}
	</script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
2.6.1.5.onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时,会触发 onmousedown 事件
当释放鼠标按钮时,会触发 onmouseup 事件
当完成鼠标点击时,会触发 onclick 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:blue;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
		<script>
			function mDown(obj) {
				obj.style.backgroundColor = "#1ec5e5";
				obj.innerHTML = "请释放鼠标按钮"
			}
			function mUp(obj) {
				obj.style.backgroundColor = "green";
				obj.innerHTML = "请按下鼠标按钮"
			}
		</script>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

2.7.JavaScript引入方式

这里只介绍两种方式

2.7.1.1.内部引入方式

直接将javascript代码写到<script type=”text/javascript”[可以省略]></script>

2.7.1.2.外部引入方式

需要创建一个.js文件,在里面书写javascript代码,然后在html文件中通过script标签的src属性引入该外部的js文件
语法
<script type="text/javascript" src="引入js文件(相对路径)" ></script>
注意:如果script通过src的属性引入了外部的文件,里面的js代码就不会执行了

3.JavaScript HTML DOM

3.1.HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

通过对象模型,JavaScript 可以获得以下能力

  • 1.JavaScript能够改变页面中的所有 HTML 元素
  • 2.JavaScript能够改变页面中的所有 HTML 属性
  • 3.JavaScript能够改变页面中的所有 CSS 样式
  • 4.JavaScript 能够对页面中的所有事件做出反应

3.2.查找HTML元素

通过JavaScprit来操作HTML元素,先要找到该元素,有以下三种

  • 1.通过 id 找到 HTML 元素
  • 2.通过标签找到 HTML 元素
  • 3.通过类名找到 HTML 元素
3.2.1.通过 id 查找HTML元素

如下代码,查找 id=“p” 的元素,点击按钮后修改p的内容

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function alterP() {
				//获取到id为p的标签
				p = document.getElementById("p");
				//修改值
				p.innerHTML = "Hello World"
			}
		</script>
	</head>
	<body>
		<button onclick="alterP()">点我修改</button>
		<p id="p">你好世界!</p>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
3.2.2.通过标签名查找 HTML 元素

本例查找 id=“main” 的元素,然后查找 id=“main” 元素中的所有

元素,并将第二个p的值修改为第一个p的值

<html>
	<head>
		<meta charset="utf-8">
		<script>
			function alterText() {
				var main = document.getElementById("main");
				//此处放回的是数组
				var p = main.getElementsByTagName("p");
				//将第二个p的值修改为第一个p的值
				p[1].innerHTML = p[0].innerHTML;
			}
		</script>
	</head>
	<body>
		<button onclick="alterText()">点击修改</button>
		<p>你好世界!</p>
		<div id="main">
			<p> DOM 是非常有用的。</p>
			<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
		</div>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
3.2.3.通过类名找到HTML元素
<html>
	<head>
		<meta charset="utf-8">
		<script>
			function alterText() {
				x = document.getElementsByClassName("p");
				document.write("<p>文本来自 class 为 p 段落: " + x[0].innerHTML + "</p>");
			}
		</script>
	</head>
	<body>
		<button onclick="alterText()">点击修改</button>
		<p class="p">你好世界!</p>
	</body>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

4.使用JS完成表单校验

示例代码
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script>
			function checkForm() {
				//alert("aa");
				/**校验用户名*/
				//1.获取用户输入的数据
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if(uValue == "") {
					//2.给出错误提示信息
					alert("用户名不能为空!");
					return false;
				}

				/*校验密码*/
				var pValue = document.getElementById("password").value;
				if(pValue == "") {
					alert("密码不能为空!");
					return false;
				}

				/**校验确认密码*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue != pValue) {
					alert("两次密码输入不一致!");
					return false;
				}

				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) {
					alert("邮箱格式不正确!");
					return false;
				}
			}
		</script>
	</head>

	<body>
		<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
			<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
				<tr>
					<td>
						用户名
					</td>
					<td>
						<input type="text" name="user" size="34px" id="user" />
					</td>
				</tr>
				<tr>
					<td>
						密码
					</td>
					<td>
						<input type="password" name="password" size="34px" id="password" />
					</td>
				</tr>
				<tr>
					<td>
						确认密码
					</td>
					<td>
						<input type="password" name="repassword" size="34px" id="repassword"></input>
					</td>
				</tr>
				<tr>
					<td>
						Emaile
					</td>
					<td>
						<input type="text" name="email" size="34px" id="eamil" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86

5.使用JS完成首页轮播图

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<script>
			//初始化图片数据
			var urls = new Array();
			urls[0] = "http://img0.imgtn.bdimg.com/it/u=496180543,2515371461&fm=11&gp=0.jpg";
			urls[1] = "http://b.hiphotos.baidu.com/image/pic/item/1b4c510fd9f9d72a113bf170de2a2834349bbb04.jpg";
			urls[2] = "http://img2.imgtn.bdimg.com/it/u=1989219628,22420354&fm=11&gp=0.jpg";
			function init() {
				//每3000毫秒调用一次changImg函数
				setInterval("changeImg()", 3000);
			}
			var i = 0
			function changeImg() {
				//获取图片链接
				document.getElementById("img").src = urls[i];
				i++;
				if(i == 3) {
					i = 0;
				}
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img" src="http://img0.imgtn.bdimg.com/it/u=496180543,2515371461&fm=11&gp=0.jpg" width="300px" height="200px" />
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

6.表格高亮显示

截图,鼠标移动到表格某一行,当前行会显示对应的高亮颜色
在这里插入图片描述
代码示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>表格移动高亮</title>
		<script>
			function changeColor(id, flag) {
				if(flag == "over") {
					document.getElementById(id).style.backgroundColor = "red";
				} else if(flag == "out") {
					document.getElementById(id).style.backgroundColor = "white";
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
					<td>1</td>
					<td>张三</td>
					<td>27</td>
				</tr>
				<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
					<td>2</td>
					<td>李四</td>
					<td>30</td>
				</tr>
				<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
					<td>3</td>
					<td>王五</td>
					<td>22</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

7.表格隔行换色

截图
在这里插入图片描述
代码示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
		<script>
			window.onload = function() {
				//1.获取表格
				var table = document.getElementById("tb");
				//2.获取表格中tbody里面的【行数】(长度)
				var len = table.tBodies[0].rows.length;
				//3.对tbody里面的行进行遍历
				for(var i = 0; i < len; i++) {
					if(i % 2 == 0) {
						//4.对偶数行设置背景颜色
						table.tBodies[0].rows[i].style.backgroundColor = "pink";
					} else {
						//5.对奇数行设置背景颜色
						table.tBodies[0].rows[i].style.backgroundColor = "gold";
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tb">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>27</td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>30</td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>22</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

8.动态添加节点

截图
在这里插入图片描述
往广州后面添加一个南京节点。
代码示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加城市</title>
		<script>
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					//1.获取ul元素节点
					var ulEle = document.getElementById("ul1");
					//2.创建城市文本节点
					var textNode = document.createTextNode("深圳");//深圳
					//3.创建li元素节点
					var liEle = document.createElement("li");//<li></li>
					//4.将城市文本节点添加到li元素节点中去
					liEle.appendChild(textNode);//<li>深圳</li>
					//5.将li添加到ul中去
					ulEle.appendChild(liEle);
				}
			}
		</script>		
	</head>

	<body>
		<input type="button" value="添加新城市" id="btn"/>
		<ul id="ul1">
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

9.全选/全不选

在这里插入图片描述

代码示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和全不选</title>
		<script>
			function checkAll(){
				//1.获取编号前面的复选框
				var checkAllEle = document.getElementById("checkAll");
				//2.对编号前面复选框的状态进行判断
				if(checkAllEle.checked==true){
					//3.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//4.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//5.拿到每一个复选框,并将其状态置为选中
						checkOnes[i].checked=true;
					}
				}else{
					//6.获取下面所有的复选框
					var checkOnes = document.getElementsByName("checkOne");
					//7.对获取的所有复选框进行遍历
					for(var i=0;i<checkOnes.length;i++){
						//8.拿到每一个复选框,并将其状态置为未选中
						checkOnes[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" >
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>1</td>
					<td>张三</td>
					<td>27</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>3</td>
					<td>王五</td>
					<td>30</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

10.城市列表联动

截图
在这里插入图片描述
选中对应的城市,会自动显示对应的区

代码

<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面重新布局</title>
		<script>
			//1.创建一个二维数组用于存储省份和城市
			var cities = new Array(3);
			cities[0] = new Array("北京市", "朝阳区", "海淀区", "昌平区");
			cities[1] = new Array("广州市", "越秀区", "天河区", "海珠区");
			cities[2] = new Array("南京市", "江宁区", "高淳区");
			cities[3] = new Array("深圳市", "宝安区");
			function changeCity(val) {
				//7.获取第二个下拉列表
				var cityEle = document.getElementById("city");
				//9.清空第二个下拉列表的option内容
				cityEle.options.length = 0;
				//2.遍历二维数组中的省份
				for(var i = 0; i < cities.length; i++) {
					//注意,比较的是角标
					if(val == i) {
						//3.遍历用户选择的省份下的城市
						for(var j = 0; j < cities[i].length; j++) {
							//alert(cities[i][j]);
							//4.创建城市的文本节点
							var textNode = document.createTextNode(cities[i][j]);
							//5.创建option元素节点
							var opEle = document.createElement("option");
							//6.将城市的文本节点添加到option元素节点
							opEle.appendChild(textNode);
							//8.将option元素节点添加到第二个下拉列表中去
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择--</option>
			<option value="0">北京市</option>
			<option value="1">广州市</option>
			<option value="2">南京市</option>
			<option value="3">深圳市</option>
		</select>
		<select id="city">
		</select>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

11.老虎机抽奖代码

截图
在这里插入图片描述
点击start可以随机向三个框中显示任意值。

代码示例

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p {
				width: 200px;
				height: 60px;
				float: left;
				border: 1px solid blue;
				background-color: #ececec;
				margin-left: 20px;
				color: #2D78F4;
				text-align: center;
				line-height: 60px;
			}
			div {
				width: 666px;
				height: 200px;
				margin: 100px auto;
			}
			input {
				border: 1px solid #2d78f4;
				background-color: #3385ff;
				cursor: pointer;
				color: #fff;
				width: 100px;
				height: 36px;
				font-size: 15px;
				margin-left: 282px;
				margin-top: 40px;
			}
		</style>
	</head>

	<body>
		<div>
			<p id="p1"></p>
			<p id="p2"></p>
			<p id="p3"></p>
			<br />
			<input type="button" value="start" id="btn" />
			<div>
	</body>
	<script>
		//保存开启的定时器
		var timerId = null;

		var numArr1 = ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'B1', 'B2', 'C1'];
		var numArr2 = []; //这个是第二个P标签的
		var numArr3 = []; //这个是第三个P标签的

		//也可以通过循环生成后两个值,如需要更健壮,循环结束后可以执行【打散】操作
		for(var i = 0; i < 100; i++) {
			var num = i + 1;
			numArr2[i] = num;
			numArr3[i] = num;
		}

		function runChoose() {
			var index1 = parseInt(Math.random() * numArr1.length);
			var index2 = parseInt(Math.random() * numArr2.length);
			var index3 = parseInt(Math.random() * numArr3.length);

			document.getElementById("p1").innerHTML = numArr1[index1];
			document.getElementById("p2").innerHTML = numArr2[index2];
			document.getElementById("p3").innerHTML = numArr3[index3];
		}

		document.getElementById("btn").onclick = function() {
			if(this.value == "start") {
				//setInterval() 方法返回的值为定时器的ID
				timerId = setInterval("runChoose()", 10);
				this.value = "stop";
			} else {
				//取消由 setInterval() 设置的 timeout,timerId为定时器id
				clearInterval(timerId);
				this.value = "start";
			}
		}
	</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/717562
推荐阅读
相关标签
  

闽ICP备14008679号