JavaWeb——【JS】——一篇文章学会JS，带案例

最新推荐文章于 2022-11-30 21:03:15 发布

狮子座的程序员

最新推荐文章于 2022-11-30 21:03:15 发布

阅读量366

点赞数

分类专栏： JavaWeb # Web前端 # Jsp

本文链接：https://blog.csdn.net/weixin_42247720/article/details/103895362

版权

Web前端同时被 3 个专栏收录

28 篇文章 5 订阅

订阅专栏

Jsp

27 篇文章 1 订阅

订阅专栏

JavaWeb

17 篇文章 0 订阅

订阅专栏

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>

以上代码，浏览器会解析并执行位于 <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>

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>

2.3.5.数据类型

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

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

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

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

var name1="lisi";
var name2='wangwu';

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

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

JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

JavaScript 数组

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

var cars=new Array("lisi","wangwu","zhaoliu");

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";

2.4.JavaScript变量作用域

2.4.1.局部变量

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

//局部变量
// 此处不能调用 name 变量
function fun() {
	var name = "LiSi";
	// 函数内可调用 name 变量
}

2.4.2.全局变量

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

代码示例

var name = "LiSi";
// 此处可调用 name 变量
function fun2() {
    // 函数内可调用 name 变量
}

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

name = "李四";

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

// 此处可调用 name 变量
function fun3() {
    name = "LiSi";
    // 此处可调用 name 变量
}

2.4.3.变量生命周期

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

2.5.JavaScript 函数

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

2.5.1.JavaScript 函数语法

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

function funName() {
	//执行代码
}

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>

上面示例，新建了一个名为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>

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

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

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

function myFunction() {
		var x = 5;
		return x;
}

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

<!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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

狮子座的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaWeb——【JS】——一篇文章学会JS，带案例

JS文章目录JS1.JavaScript简介2.JavaScript入门2.1.script 标签2.2.JavaScript 输出2.3.JavaScript的语法2.3.1.关键字2.3.2.标识符2.3.3.注释2.3.4.变量2.3.5.数据类型2.4.JavaScript变量作用域2.4.1.局部变量2.4.2.全局变量2.4.3.变量生命周期2.5.JavaScript 函数2.5....
复制链接

扫一扫