JavaScript

2025-03-12 约 8504 字预计阅读 17 分钟

https://bing.ee123.net/img/rand?artid=146185848

JavaScript

JavaScript 的组成

JavaScript 是一种广泛应用于网页开发的脚本语言，它主要由 ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。下面将详细介绍这三个组成部分。

1. ECMAScript

定义

ECMAScript 是 JavaScript 的核心，它是由欧洲计算机制造商协会（ECMA）制定的标准，规定了 JavaScript 的基本语法、数据类型、控制结构、对象模型等核心语言特性。可以把它看作是 JavaScript 的基础语法规则，为 JavaScript 程序的编写提供了基本框架。

发展历程

ECMAScript 不断发展和演进，目前已经有多个版本，如 ES5、ES6（ES2015）、ES7 等。每个版本都引入了一些新的特性和语法糖，以提高开发效率和代码的可读性。例如，ES6 引入了箭头函数、 let 和 const 声明、Promise 对象等。

核心特性

变量与数据类型 ：支持多种数据类型，包括基本数据类型（如 Number 、 String 、 Boolean 、 Null 、 Undefined 、 Symbol ）和引用数据类型（如 Object ）。可以使用 var 、 let 和 const 来声明变量。

javascript

// 使用 let 声明变量
let num = 10;
// 使用 const 声明常量
const str = "Hello, ECMAScript!";

函数：函数是 ECMAScript 中的一等公民，可以作为参数传递、返回值返回，还可以嵌套定义。支持普通函数和箭头函数两种定义方式。

javascript

// 普通函数
function add(a, b) {
    return a + b;
}
// 箭头函数
const subtract = (a, b) => a - b;

控制语句 ：包括 if...else 、 switch 、 for 、 while 、 do...while 等控制语句，用于控制程序的执行流程。

javascript

for (let i = 0; i < 5; i++) {
    console.log(i);
}

对象和类 ：ES6 引入了类的概念，使得面向对象编程在 JavaScript 中更加直观和方便。

javascript

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
const person = new Person("Alice", 25);
person.greet();

2. 文档对象模型（DOM）

定义

文档对象模型（DOM）是 HTML 和 XML 文档的编程接口，它将网页文档表示为一个树形结构，树中的每个节点都可以被访问和操作。通过 DOM，JavaScript 可以动态地修改网页的内容、结构和样式。

常见操作

选择元素 ：可以使用多种方法选择 HTML 元素，如 getElementById 、 getElementsByClassName 、 getElementsByTagName 、 querySelector 和 querySelectorAll 。

html

<!DOCTYPE html>
<html>
<body>
    <div id="myDiv">This is a div</div>
    <script>
        const div = document.getElementById('myDiv');
        console.log(div);
    </script>
</body>
</html>

修改元素内容 ：使用 innerHTML 、 textContent 等属性来修改元素的内容。

javascript

const element = document.querySelector('p');
element.textContent = 'New paragraph text';

修改元素样式 ：通过 style 属性来修改元素的 CSS 样式。

javascript

const element = document.getElementById('myDiv');
element.style.color = 'red';

事件处理 ：为元素添加事件监听器，响应用户的操作，如 click 、 mouseover 等事件。

html

<!DOCTYPE html>
<html>
<body>
    <button id="myButton">Click me</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function () {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

3. 浏览器对象模型（BOM）

定义

浏览器对象模型（BOM）提供了与浏览器窗口进行交互的对象和方法，它允许 JavaScript 控制浏览器窗口的各个方面，如浏览器窗口的大小、位置、历史记录、弹出框等。不过，BOM 并没有标准化，不同浏览器可能会有一些差异。

常见对象

window 对象 ：是 BOM 的顶层对象，代表浏览器窗口，包含了许多有用的方法和属性。

javascript

// 弹出警告框
window.alert('This is an alert');
// 定时执行函数
window.setTimeout(() => {
    console.log('This message is shown after 2 seconds');
}, 2000);

location 对象 ：用于获取或设置当前页面的 URL 信息。

javascript

// 获取当前页面的 URL
console.log(window.location.href);
// 跳转到新页面
window.location.href = 'https://www.example.com';

history 对象 ：允许操作浏览器的历史记录。

javascript

// 后退一页
window.history.back();
// 前进一页
window.history.forward();

navigator 对象 ：包含有关浏览器的信息，如浏览器的名称、版本等。

javascript

console.log(navigator.userAgent); // 获取浏览器的用户代理信息

screen 对象 ：包含有关用户屏幕的信息，如屏幕的宽度、高度等。

javascript

console.log(screen.width); // 获取屏幕的宽度

综上所述，ECMAScript 为 JavaScript 提供了基本的语法和编程结构，DOM 用于操作网页文档，BOM 用于与浏览器窗口进行交互，三者共同构成了完整的 JavaScript 体系，使得开发者可以创建出交互性强、动态性高的网页应用。

在md文档中为ECMAScript的核心特性添加代码示例

写一篇介绍JavaScript的DOM的md文档

如何在md文档中展示JavaScript的BOM组成部分？

JavaScript的使用

1、JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript(Adobe公司，需要插件）等。

前端三大块：

HTML：页面结构
CSS:页面表现：元素大小、颜色、位置、隐藏或显示，部分动画效果
JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

2.JavaScript嵌入页面的方式

1.行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2.页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3.外部引入

<script type="text/javascript" src="js/index.js"></script>

3.变量

JavaScript是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键词’var'

 var iNum = 123;
 var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';

3.1 变量类型

5种基本数据类型：

1、number 数字类型

2、string 字符串类型

3、boolean 布尔类型 true 或false

4、undefined undefined 类型，变量声明未初始化，它的值就是undefined

5、null 类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null

1钟复合类型：

object

3.2 变量、函数、属性、函数参数命名规范

1、区分大小写

2、第一个字符必须是字母、下划线（_）或者美元符号（$）

3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象o Object 比如：oDiv

数组a Array 比如：aItems

字符串s String 比如：sUserName

整数i Integer 比如：iItemCount

布尔值b Boolean 比如：bIsComplete

浮点数f Float 比如：fPrice

函数fn Function 比如：fnHandler

正则表达式re RegExp 比如：reEmailCheck

4.获取元素方法一(通过id属性）

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 通过ID名获取元素赋值给oDiv变量
			var oDiv = document.getElementById('div1');

			// 改变元素的属性
			oDiv.style.color = "red";
			oDiv.style.fontSize = "20px";


		</script>
	</head>
	<body>
		<div id="div1">这是一个元素</div>
	</body>
</html>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">这是一个元素</div>
		<script type="text/javascript">
			// 通过ID名获取元素赋值给oDiv变量
			var oDiv = document.getElementById('div1');
		
			// 改变元素的属性
			oDiv.style.color = "red";
			oDiv.style.fontSize = "20px";
		</script>
	</body>
</html>

第二种方法：将javascript语句放到window.onload触发的函数里面，获取元素的语句会在页面加载完后才执行，就不会出错了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//当整个页面加载完之后再执行花括号里面的语句
					window.onload = function(){
			
						// 通过ID名获取元素赋值给oDiv变量
						var oDiv = document.getElementById('div1');
			
						// 改变元素的属性
						oDiv.style.color = "red";
						oDiv.style.fontSize = "20px";
			
					}
		</script>
	</head>
	<body>
		<div id="div1">这是一个元素</div>
	</body>
</html>

5.操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写

5.1 操作方法

1、“.”操作

2、“[ ]”操作

5.2 属性写法

1、html的属性和js里面属性写法一样

2、“class”属性写成“className”

3、“style”属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成“style.fontSize”

通过“.”操作属性：

5.3 通过 . 操作属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oDiv=document.getElementById('div1')
				var oA=document.getElementById('link')
				var oDiov2=document.getElementById('div2')
				
				// 读取属性
				var sId=oDiv.id;
				alert(sId);
				
				// 写属性
				oDiv.style.color="yellow";
				oA.href="http://www.baidu.com";
				oA.title="这是去到百度往的链接";
				
				// 操作class属性需要写成className
				oDiov2.className="box2"
			}
		</script>
		
		<style type="text/css">
			.box{
				font-size: 20px;
				color: aquamarine;
			}
			.box2{
				font-size:30px;
				color: beige;
			}
		</style>
	</head>
	<body>
		<div id="div1">这是一个div元素</div>
		<a href="#" id="link">这是一个链接</a>
		<div class="box" id="div2">这是第二个div</div>
	</body>
</html>

5.4 通过 [ ]操作属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var odiv=document.getElementById('div1')
				
				// odvi.style.color="red"
				odiv.style["color"]="red";
				odiv.style["fontSize"]="30px"
				
			}
			
		</script>
	</head>
	<body>
		<div id="div1">这是一个div元素</div>
	</body>
</html>

5.5 innerHTML

innerHTML可以读取或者写入标签包裹的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var odiv = document.getElementById('pxy')
				var str = odiv.innerHTML
				alert(str)
				
				// 改写div中的内容
				odiv.innerHTML="<a href='http://www.baidu.com'>百度</a>"
			}
		</script>
	</head>
	<body>
		<div id="pxy">脑子又有点乱想了</div>
	</body>
</html>

6. 函数

函数就是重复执行的代码片

6.1 函数定义与执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 函数的定义
			function Myalert(){
				alert('hello world!')
			}
			
			// 函数调用执行
			Myalert();
		</script>
	</head>
	<body>
		
	</body>
</html>

6.2 变量与函数预解析

JavaScript解析过程分为两个阶段，先是 编译阶段 ，然后是 执行阶段 ，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">    
		    fnAlert();       // 弹出 hello！
		    alert(iNum);  // 弹出 undefined
		    function fnAlert(){
		        alert('hello!');
		    }
		    var iNum = 123;
		</script>
	</head>
	<body>
		
	</body>
</html>

6.3 提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var obtn=document.getElementById("btn01");
				
				// 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
				obtn.onclick=fnChange;
				
				function fnChange(){
					var odiv=document.getElementById('div1');
					odiv.style.color="red";
					odiv.style.fontSize="30px";
				}
			}
		</script>
	</head>
	<body>
		<!-- 标签内调用 -->
		<div id="div1">这是一个div元素</div>
		<input type="button" name="" value="改变div" id="btn01">
	</body>
</html>

6.4 匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var obtn=document.getElementById("btn01");
				
				
				obtn.onclick=function(){
					var odiv=document.getElementById('div1');
					odiv.style.color="red";
					odiv.style.fontSize="30px";
				}
			}
		</script>
	</head>
	<body>
		<!-- 标签内调用 -->
		<div id="div1">这是一个div元素</div>
		<input type="button" name="" value="改变div" id="btn01">
	</body>
</html>

6.5 综合案例（网页换肤）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/skin1.css" id="link">
    </head>
    <!-- 页面的 JavaScript 代码部分，使用 window.onload 事件确保在页面所有元素加载完成后再执行代码 -->
    <script>
        window.onload = function () {
			//获取按钮元素
            var obtn01 = document.getElementById('btn01');
            var obtn02 = document.getElementById('btn02');
			// 获取css链接元素
            var link_id = document.getElementById('link');

            function Change_skin() {
                // 修改 link 元素的 href 属性，将其指向 skin2.css 文件
                link_id.href = "./css/skin2.css";
            }

            // 为按钮 btn02 绑定点击事件，当点击该按钮时，调用 Change_skin 函数，实现切换到 skin2.css 样式表的功能
            obtn02.onclick = Change_skin;
            // 为按钮 btn01 绑定点击事件，当点击该按钮时，执行一个匿名函数，将 link 元素的 href 属性修改为指向 skin1.css 文件，实现切换回 skin1.css 样式表的功能
            obtn01.onclick = function () {
                link_id.href = "./css/skin1.css";
            };
        };
    </script>
    <body>
        <input type="button" id="btn01" name="" value="肤色1">
        <input type="button" id="btn02" name="" value="肤色2">
    </body>
</html>

6.6 函数传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var odiv=document.getElementById('div01')
				
				function Change_name(mystyle,val){
					odiv.style[mystyle]=val
				}
				
				// 调用函数，并传入参数
				Change_name("font-size","30px")
				Change_name("height","400px")
				Change_name("width","400px")
				Change_name("background-color","green")
				
			}
		</script>
	</head>
	<body>
		<div id="div01">这是一个盒子</div>
	</body>
</html>

6.7 函数 return 关键字

函数中 return 关键字的作用：

返回函数执行的结果
结束函数的运行
阻止默认行为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		function fnAdd(a,b) {
			var c = a + b;

			// 返回c的值，然后结束函数的运行
			return c;

			alert("内部的c="+c);

		}
		var iResult = fnAdd(2,5);

		alert(iResult);

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

7.条件语句

通过条件来控制程序的走向，就需要用到条件语句。

7.1 运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)

2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=

3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

加法运算

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload =function(){

			var oInput01 = document.getElementById('input01');
			var oInput02 = document.getElementById('input02');
			var oBtn = document.getElementById('btn');

			oBtn.onclick = function(){
				var iVal01 = parseInt(oInput01.value);
				var iVal02 = parseInt(oInput02.value);

				alert(iVal01+iVal02);
			}

		}

	</script>
</head>
<body>
	<input type="text" name="" id="input01"> ＋
	<input type="text" name="" id="input02">

	<input type="button" name="" value="相加" id="btn">

</body>
</html>

7.2 if else

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

		var iNum01 = 12;
		var iNum02 = 24;

		if(iNum01>iNum02){
			alert('大于');
		}
		else{
			alert('不大于');	
		}

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

理解练习

制作单个按钮点击切换元素的显示和隐藏效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oBtn = document.getElementById('btn01');
			var oDiv = document.getElementById('box01');


			// oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空

			oBtn.onclick = function(){

				if(oDiv.style.display=='block'||oDiv.style.display=='')
				{
					oDiv.style.display = 'none';
				}
				else
				{
					oDiv.style.display = 'block';
				}				
			}
		}
	</script>
	<style type="text/css">		
		.box{
			width:200px;
			height:400px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="切换" id="btn01">
	<div class="box" id="box01"></div>
</body>
</html>

7.3 多重if else语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 2;
			var oBody = document.getElementById('body01');

			if(iWeek==1){
				oBody.style.backgroundColor = 'gold';
			}
			else if(iWeek==2)
			{
				oBody.style.backgroundColor = 'green';
			}
			else if(iWeek==3){
				oBody.style.backgroundColor = 'pink';
			}
			else if(iWeek==4){
				oBody.style.backgroundColor = 'yellowgreen';
			}
			else if(iWeek==5){
				oBody.style.backgroundColor = 'lightblue';
			}
			else{
				oBody.style.backgroundColor = 'lightgreen';
			}

		}
	</script>
</head>
<body id="body01">
	
</body>
</html>

7.4 switch语句

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 3;
			var oBody = document.getElementById('body01');

			switch (iWeek){
				case 1:
					oBody.style.backgroundColor = 'gold';
					break;
				case 2:
					oBody.style.backgroundColor = 'green';
					break;
				case 3:
					oBody.style.backgroundColor = 'pink';
					break;
				case 4:
					oBody.style.backgroundColor = 'yellowgreen';
					break;
				case 5:
					oBody.style.backgroundColor = 'lightblue';
					break;
				default:
					oBody.style.backgroundColor = 'lightgreen';
			}

		}
	</script>
</head>
<body id="body01">
	
</body>
</html>

8.数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

8.1 定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

8.2 操作数组中数据的方法

1、获取数组的长度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 弹出4,3,2,1

7、indexOf() 返回数组中元素 第一次 出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

8.3 多维数组

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

批量操作数组中的数据，需要用到循环语句

9.循环语句

程序中进行有规律的重复性操作，需要用到循环语句。

9.1 for循环

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

	  var aList = ['a','b','c','d'];
	  var iLen = aList.length;

	  for(var i=0;i<iLen;i++)
	  {
	  	 alert(aList[i]);
	  }

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

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oUl = document.getElementById('list');
			var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
			var iLen = aList.length;
			var sTr = '';


			for(var i=0;i<iLen;i++)
			{
				sTr += '<li>'+ aList[i]+ '</li>';
			}

			oUl.innerHTML = sTr;

		}


	</script>

	<style type="text/css">
		
		.list{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:300px;
			height:305px;
			
		}

		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height:60px;
			font-size:16px;
		}


	</style>
</head>
<body>
	<ul class="list" id="list">
		<!-- <li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li> -->
	</ul>
</body>
</html>

结果：

9.2while循环

var array = [1, 4, 5];        
  var index = 0;
  
  while (index < array.length) {
      result = array[index];
      alert(result);
      index++;
  }

9.3 数据去重

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		var aList = [2,3,4,3,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
		var iLen = aList.length;

		var aList2 = [];

		for(var i=0;i<iLen;i++)
		{
			if(aList.indexOf(aList[i])==i){
				aList2.push(aList[i]);
			}
		}

		alert(aList2);

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

10.获取元素的方法二（通过标签获取）

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script type="text/javascript">
		window.onload = function(){

			// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
			var aLi = document.getElementsByTagName('li');

			var iLen = aLi.length;


			var oUl = document.getElementById('list1');
			var aLi2 = oUl.getElementsByTagName('li');

			var iLen2 = aLi2.length;

			for(var i=0;i<iLen2;i++)
			{
				if(i%2==0)
				{
					aLi2[i].style.backgroundColor = 'gold';
				}
			}

		}

	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul id="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>

结果：

11.定时器

11.1 定时器在javascript中的作用

1、制作动画

2、异步操作

3、函数缓冲与节流

11.2. 定时器的使用：

js 定时器有两种创建方式：

setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout 函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1 , 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

function hello() {
      console.log('hello');
  }
  
  // 执行一次函数的定时器
  setTimeout(hello, 500);

setInterval 函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1 , 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

function hello() {
      console.log('hello');
  }
  
  // 重复执行函数的定时器
  setInterval(hello, 1000);

11.3. 清除定时器

js 清除定时器分别是:

clearTimeout(timeoutID) 清除只执行一次的定时器( setTimeout 函数)
clearInterval(timeoutID) 清除反复执行的定时器( setInterval 函数)

clearTimeout 函数的参数说明:

timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

setTimeout = function (res) {res()}
function hello() {
    console.log('hello');
}

// 执行一次函数的定时器
t1 = setTimeout(hello, 500);
// 清除只执行一次的定时器
// clearTimeout(t1)

clearInterval 函数的参数说明:

timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

setInterval = function (res) {res()}
function hello() {
    console.log('hello');
}

// 重复执行函数的定时器
var t1 = setInterval(hello, 1000);

// clearInterval(t1);

11.4 案例

1.往复运动动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload=function(){
			var odiv=document.getElementById('div1')
			var dlef=0;
			var speed=3;
			
			
			var timer=setInterval(function(){
				dlef+=speed;
				
				odiv.style.left=dlef+"px";
				if(dlef>700){
					speed=-3;
				}
				if(dlef<0){
					speed=3;
				}
			},20);
		}
	</script>
	
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color: green;
			position:absolute;
			top:100px;
			left:0;
		}
	</style>
	<body>
		<div id="div1" class="box"></div>
	</body>
</html>

2.无缝滚动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.list_con {
				width: 1000px;
				height: 200px;
				border: 1px solid #000;
				margin: 10px auto 0;
				background-color: #f0f0f0;
				position: relative;
				overflow: hidden;
			}

			.list_con ul {
				list-style: none;
				width: 2000px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}

			.list_con li {
				width: 180px;
				height: 180px;
				float: left;
				margin: 10px;
			}

			.btns_con {
				width: 1000px;
				height: 30px;
				margin: 50px auto 0;
				position: relative;
			}

			.left,
			.right {
				width: 30px;
				height: 30px;
				background-color: gold;
				position: absolute;
				left: -40px;
				top: 124px;
				font-size: 30px;
				line-height: 30px;
				color: #000;
				font-family: 'Arial';
				text-align: center;
				cursor: pointer;
				border-radius: 15px;
				opacity: 0.5;
			}

			.right {
				left: 1010px;
				top: 124px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
					var odiv = document.getElementById('slide');
					var obtn01 = document.getElementById('btn01')
					var obtn02 = document.getElementById('btn02')

					// 通过标签获取元素，获取的是选择集，加上下标才能获取到元素
					var oUl = odiv.getElementsByTagName('ul')[0];
					var ilef = 0;
					var ispeed = -2;
					var iNowspeed = 0;

					// 将ul里面的内容复制一份，整个ul里面就包含了10个li
					oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

					function moving() {
						ilef += ispeed;
						// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
						if (ilef < -1000) {
							ilef = 0;
						}
						// 当ul在起始位置往右滚动的时候，瞬间将ul拉回到往左的第5个li的位置
						if (ilef > 0) {
							ilef = -1000;
						}
						oUl.style.left = ilef + 'px';
					}
					var timer = setInterval(moving, 30);
					obtn01.onclick = function() {
						ispeed = -2;
					}
					obtn02.onclick = function() {
						ispeed = 2;
					}
					// 当鼠标移入的时候
					odiv.onmouseover = function() {
						iNowspeed = ispeed;
						ispeed = 0;
					}
					// 当鼠标移出的时候
					odiv.onmouseout = function() {
						ispeed = iNowspeed;
					}
				}
		</script>

	</head>
	<body>
		<div class="btns_con">
			<div class="left" id="btn01">&lt;</div>
			<div class="right" id="btn02">&gt;</div>
		</div>
		<div class="list_con" id="slide">
			<ul>
				<li><a href="#"><img src="images/goods001.jpg" alt="商品图片"></a></li>
				<li><a href="#"><img src="images/goods002.jpg" alt="商品图片"></a></li>
				<li><a href="#"><img src="images/goods003.jpg" alt="商品图片"></a></li>
				<li><a href="#"><img src="images/goods004.jpg" alt="商品图片"></a></li>
				<li><a href="#"><img src="images/goods005.jpg" alt="商品图片"></a></li>
			</ul>
		</div>
	</body>
</html>

静态图：

3.时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		window.onload = function() {
			var oDiv = document.getElementById('div1');

			function getTime() {
				var now = new Date();
				// 获取年份
				var year = now.getFullYear();
				// 获取月份，月份是从0到11，0表示一月，11表示十二月
				var month = now.getMonth();
				// 获取日
				var day = now.getDate();

				// 获取星期几,星期是从0到6,0表示星期天
				var week = now.getDay();
				// 获取时
				var hour = now.getHours();
				// 获取分钟
				var minute = now.getMinutes()
				// 获取秒钟
				var second = now.getSeconds()

				oDiv.innerHTML = '当前时间是：' + year + '年' + getMonth(month) + '月' + day + '日' + ' ' + getWeek(week) + hour +
					'时' + minute + '分' + second + '秒'
			}
			// 刚开始调用一次，解决刚开始1秒钟空白的问题
			getTime();
			setInterval(getTime, 1000);


			function getMonth(n) {
				if (n < 12) {
					return n + 1;
				} else {
					return n;
				}
			}

			function getWeek(n) {
				if (n == 0) {
					return '星期天'
				} else if (n == 1) {
					return '星期一'
				} else if (n == 2) {
					return '星期二'
				} else if (n == 3) {
					return '星期三'
				} else if (n == 4) {
					return '星期四'
				} else if (n == 5) {
					return '星期五'
				} else {
					return '星期六'
				}
			}
		}
	</script>
	<style type="text/css">
		.box {
			width:800px;
			margin: 50px auto 0;
			font-size: 30px;
			color: palegoldenrod;
		}
	</style>
	<body>
		<div class="box" id="div1"></div>
	</body>
</html>

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时案例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

       .countdown {
            font-size: 36px;
            color: #333;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="countdown" id="countdown"></div>

    <script>
        // 设置未来时间，这里设置为 2026 年 1 月 1 日 00:00:00
        const futureDate = new Date("2026-01-01T00:00:00").getTime();

        // 更新倒计时的函数
        const updateCountdown = () => {
            const now = new Date().getTime();
            const distance = futureDate - now;

            if (distance < 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "倒计时已结束！";
                return;
            }

            // 计算剩余的天数、小时数、分钟数和秒数
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 显示倒计时
            document.getElementById("countdown").innerHTML = `距离2026年1月1日还剩：${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
        };

        // 初始调用更新函数
        updateCountdown();

        // 每秒更新一次倒计时
        const countdownInterval = setInterval(updateCountdown, 1000);
    </script>
</body>

</html>

效果图：

目录

JavaScript

JavaScript

JavaScript 的组成

1. ECMAScript

定义

发展历程

核心特性

2. 文档对象模型（DOM）

定义

常见操作

3. 浏览器对象模型（BOM）

定义

常见对象

JavaScript的使用

1、JavaScript介绍

前端三大块：

2.JavaScript嵌入页面的方式

3.变量

3.1 变量类型

3.2 变量、函数、属性、函数参数命名规范

4.获取元素方法一(通过id属性）

5.操作元素属性

5.1 操作方法

5.2 属性写法

5.3 通过 . 操作属性

5.4 通过 [ ]操作属性

5.5 innerHTML

6. 函数

6.1 函数定义与执行

6.2 变量与函数预解析

6.3 提取行间事件

6.4 匿名函数

6.5 综合案例（网页换肤）

6.6 函数传参

6.7 函数 return 关键字

7.条件语句

7.1 运算符

加法运算

7.2 if else

7.3 多重if else语句

7.4 switch语句

8.数组及操作方法

8.1 定义数组的方法

8.2 操作数组中数据的方法

8.3 多维数组

9.循环语句

9.1 for循环

9.2while循环

9.3 数据去重

10.获取元素的方法二（ 通过标签获取）

11.定时器

11.1 定时器在javascript中的作用

11.2. 定时器的使用：

11.3. 清除定时器

11.4 案例

1.往复运动动画

2.无缝滚动

3.时钟

10.获取元素的方法二（通过标签获取）