JavaScript实验（基础实验操作及报告）

H3_101128

368人浏览 · 2026-04-24 14:09:58

H3_101128 · 2026-04-24 14:09:58 发布

实验1 初识JavaScript

1 实验目的

（1）熟悉JavaScript开发环境；

（2）掌握JavaScript基本语法和变量使用

（3）常用JavaScript数据类型；

（4）掌握JavaScript输入和输出的方法。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

（1）三种引入方式

第一种：外部引入:<script type="text/javascript" src="路径/文件名.js"></script>

第二种：内部引入:<script type="text/javascript">js代码</script>

第三种：行内引入:<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');">

（2）变量

JavaScript中通常使用var关键字声明变量，声明变量后，变量值默认会被设定为undefined，表示未定义。如果需要使用变量保存具体的值就需要在声明变量后为其赋值。先声明变量后赋值的示例代码如下。

/ 声明变量

var username;// 声明一个名称为username的变量

var age, sex, height;// 同时声明3个变量

// 为变量赋值

username = '小智'; // 为变量赋值'小智'

age = 20;// 为变量赋值20

sex = '男';// 为变量赋值'男'

height = 180; // 为变量赋值180

（3）输入和输出

JavaScript提供了输入输出语句。

常用的输入输出语句如下表所示。

类型	语句	作用
输入	prompt()	在网页中弹出输入框
输出	alert()	在网页中弹出警告框
	document.write()	在网页中输出内容
	console.log()	在控制台中输出内容

（4）数据类型

数据类型可以分为基本数据类型（或称为值类型）和复杂数据类型（或称为引用类型）。JavaScript中的数据类型分类如下图所示。

实验内容

（1）利用外部引入的方式引入JavaScript代码，实现在页面中弹出告警框，内容为“我是通过外链式引入的JS代码”

（2）编写一个JavaScript程序，要求声明一个变量用于存储用户名，提示用户从界面输入一串字符串并作为用户名，然后通过控制台输出用户名。

（3）编写一个JavaScript程序，实现验证用户输入的密码是否正确，正确为‘admin’,若提示正确则在页面显示‘密码输入正确’，否则在在页面显示‘密码输入错误’。

（4）编写一个JavaScript程序，实现验证根据用户的输入完成两位数据的求和运算，运算结果保留2为小数。

实验2 打印金子塔

1 实验目的

（1）熟悉JavaScript开发环境；

（2）掌握JavaScript运算符；

（3）熟悉JavaScript数据类型；

（4）掌握JavaScript流程控制。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1 选择结构

选择结构语句指的是根据语句中的条件进行判断，进而执行与条件相对应的代码。选择结构语句也称为条件判断语句。

1. if 语句

说明：最基本的条件判断语句，当条件为true时执行对应的代码块。

if (条件表达式) {

// 条件为true时执行的代码

}

示例：

var age = 18;

if (age >= 18) {

console.log("已成年");

}

2. if...else 语句

说明：在if条件不成立时执行备选代码块。

语法：

if (条件表达式) {

// 条件为true时执行的代码

} else {

// 条件为false时执行的代码

}

示例：

var age = 16;

if (age >= 18) {

console.log("已成年");

} else {

console.log("未成年");

}

3. if...else if...else 语句

说明：用于多条件判断，依次检查条件，直到找到第一个成立的条件并执行对应代码块。

语法：

if (条件1) {

// 条件1为true时执行

} else if (条件2) {

// 条件2为true时执行

} else if (条件3) {

// 条件3为true时执行

} else {

// 所有条件都为false时执行

}

示例：

var score = 85;

if (score >= 90) {

console.log("优秀");

} else if (score >= 80) {

console.log("良好");

} else if (score >= 60) {

console.log("及格");

} else {

console.log("不及格");

}

4. switch 语句

说明：用于基于不同值执行不同代码块，适合多值判断场景。

语法：

switch (表达式) {

case 值1:

// 表达式等于值1时执行

break;

case 值2:

// 表达式等于值2时执行

break;

// 更多case...

default:

// 所有case都不匹配时执行

}

示例：

var day = 3;

switch (day) {

case 1:

console.log("星期一");

break;

case 2:

console.log("星期二");

break;

case 3:

console.log("星期三");

break;

default:

console.log("其他星期");

}

注意：break语句用于跳出switch块，若省略，会继续执行下一个case。

3.2 循环语句

循环语句用于重复执行一段代码，直到满足特定条件。

1. for 循环

说明：最常用的循环形式，适合已知循环次数的场景。

语法：

for (初始化表达式; 条件表达式; 更新表达式) {

// 循环体，条件为true时执行

}

示例：

// 输出1到5

for (var i = 1; i <= 5; i++) {

console.log(i);

}

2. while 循环

说明：当条件为true时，持续执行循环体。

语法：

while (条件表达式) {

// 循环体

}

示例：

// 输出1到5

var i = 1;

while (i <= 5) {

console.log(i);

i++;

}

3. do...while 循环

说明：先执行一次循环体，再检查条件，确保循环体至少执行一次。

语法：

do {

// 循环体

} while (条件表达式);

示例：

// 输出1到5

var i = 1;

do {

console.log(i);

i++;

} while (i <= 5);

3.3 跳转语句

跳转语句用于改变代码的执行顺序。

1. break 语句

说明：终止当前循环或switch语句，并跳出该代码块。

示例：

// 找到第一个偶数就停止

for (var i = 1; i <= 10; i++) {

if (i % 2 === 0) {

console.log("找到偶数:", i);

break;

}

2. continue 语句

说明：跳过当前循环中的剩余代码，直接进入下一次循环。

示例：

// 只输出奇数

for (var i = 1; i <= 10; i++) {

if (i % 2 === 0) {

continue;

}

console.log(i);

}

4实验内容

**请编写一个JavaScript程序，利用循环语句以及条件判断语句输出一个由“*”组成的金字塔形状的图形（下称金字塔）。**

要求：金字塔的层数是由用户输入的，例如，用户输入5，表示输出5层的金字塔，顶端为金字塔的第1层，金字塔从第1层起，每层的“*”遵循“1、3、5、7、9、11，…”的规律。本程序需要判断用户输入的值是否为纯数字。下面以5层金字塔为例，输出效果如下。

提示：以5层金字塔为例

每层中“*”的数量 = 当前层数 × 2 - 1。例如当前为第4层，则“*”数量 = 4 × 2-1=7。

每层“*”前的空格 = 金字塔层数 – 当前层数。例如当前行数为第3层，则空格数= 5 – 3 =2。

附加题（选做）：

（1）编写一个JavaScript程序，实现1-100中所有能够被4整除的整数之和。

（2）编写一个JavaScript程序，让用户输入分数（0-100），判断等级并输出：90-100优秀；80-89良好；60-79及格；0-59不及格；输入非法时提示"分数无效"。

（3）编写一个JavaScript程序，计算n！:让用户输入要计算阶乘的整数n，输入非法字符或者负数时给出错误提示，输出计算结果。

（4）编写一个JavaScript程序，实现猜数字游戏：程序随机生成 1-100 的整数（提示生成随机数的代码为var randomNum = Math.floor(Math.random() * 100) + 1），让用户反复猜数字，通过 while 循环判断：猜大了提示 "太大了"，猜小了提示 "太小了"，猜对了结束循环并提示 "恭喜猜对！"。

（5）编写一个JavaScript程序，实现简易计算器：让用户输入两个数字和一个运算符（+、-、*、/），使用 switch 语句实现简单的四则运算。

实验3 选项卡、二级联动

1 实验目的

（1）熟悉JavaScript开发简单的网页；

（2）掌握一维数组和二维数组的使用；

（3）掌握数组的基本操作。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1数组的创建方式

1. 字面量方式（推荐）

最简洁的创建方式，直接用方括号包裹元素，支持空数组创建。

// 普通数组

const numArr = [1, 2, 3, 4];

// 混合类型数组

const mixedArr = [1, "hello", true, { name: "JS" }];

// 空数组

const emptyArr = [];

2. 构造函数方式（new Array()）

通过 Array 构造函数创建，需注意参数差异：

传入多个值：直接作为数组元素。

传入单个数字：表示数组初始长度，元素默认是 undefined。

// 传入多个元素

const arr1 = new Array(10, 20, 30); // [10, 20, 30]

// 传入单个数字（表示长度）

const arr2 = new Array(5); // 长度为5的空数组，元素均为 undefined

3.2 数组的基本特性

1.动态长度：数组长度会自动调整，可通过 length 属性访问或修改：

const arr = [1, 2, 3];

console.log(arr.length); // 3

arr.length = 2; // 截断数组，变为 [1, 2]

2.索引访问：通过数字索引（从 0 开始）访问元素：

const arr = ['a', 'b', 'c'];

console.log(arr[0]); // 'a'（第一个元素）

arr[2] = 'd'; // 修改第三个元素，数组变为 ['a', 'b', 'd']

3.元素类型不限：可存储任意类型数据，包括混合类型：

const mixedArr = [1, 'hello', true, { name: 'js' }, [1, 2]];

3.3数组的基本操作

1. 访问与修改元素

通过「索引」访问或修改元素，索引从 0 开始。

const arr = ["a", "b", "c"];

// 访问元素（索引0对应第一个元素）

console.log(arr[0]); // 输出："a"

// 修改元素

arr[2] = "d";

console.log(arr); // 输出：["a", "b", "d"]

2. 控制数组长度（length 属性）

length 是数组的核心属性，可读取或修改数组长度：

读取：返回数组当前元素个数。

修改：缩短时截断数组，加长时新增的元素为 undefined。

const arr = [1, 2, 3];

// 读取长度

console.log(arr.length); // 输出：3

// 缩短数组（截断末尾元素）

arr.length = 2;

console.log(arr); // 输出：[1, 2]

// 加长数组（新增元素为 undefined）

arr.length = 4;

console.log(arr); // 输出：[1, 2, undefined, undefined]

3.数组的遍历方式

最通用的遍历方式，通过索引控制循环，支持灵活操作（如跳过、中断）。

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {

console.log(`索引 ${i}：${arr[i]}`); // 输出每个元素的索引和值

数组元素的删除

delete 是通用运算符，删除数组元素时仅清空值、不删位置、长度不变，适合特殊的 “保位清空”场景：

delete 数组[索引];

参数：数组[索引] 表示要删除的目标元素（需指定有效索引）。

返回值：成功删除返回 true，删除不存在的索引也返回 true（无报错）。

const arr = [10, 20, 30, 40];

// 删除索引1对应的元素（值为20）delete arr[1];

console.log(arr); // 输出：[10, empty, 30, 40]console.log(arr.length); // 输出：4（长度未变）console.log(arr[1]); // 输出：undefined（空占位符访问时返回undefined）

4实验内容

1.编写一个JavaScript程序，利用数组实现选项卡联动功能。

要求：用户选择省份后，可以继续选择该省份下的市，选择市后可以继续选择该市下属的县，省份和市以及县可以自己设置合适的选项值，图上的选项仅供参考。至少实现省份和市的联动。

2.将数组['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']反转，反转后的数组为['星期日', '星期六', '星期五', '星期四', '星期三', '星期二', '星期一']。

3.使用冒泡排序将数组[23, 35, 15, 60, 88, 90]中的元素从大到小排序。

附加题（选做）：

（1）让用户输入5 个数字存入数组，输出数组并找出数组中的最大值。

（2）利用二维数组给班上的3名同学的4门课程成绩求和和平均分，三位同学成绩依次为：(88,70,60,60)，（66,46,60,80），（100,80,112,90）

实验4 显示时间和倒计时

1 实验目的

（1）掌握使用JavaScript开发简单网页的方法；

（2）掌握函数的定义和调用方法；

（3）掌握对象的创建和使用方法；

（4）掌握日期和时间对象的应用。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1函数

1.函数声明与调用

function 函数名(参数1, 参数2, ...) {

// 函数体（执行逻辑）

return 返回值; // 可选，无return则返回undefined

}

示例：

// 声明函数

function add(a, b) {

return a + b;

}

// 调用函数

console.log(add(2, 3)); // 输出：5

2.函数表达式

const 变量名 = function(参数1, 参数2, ...) {

// 函数体

return 返回值;

};

示例：

// 定义函数表达式

const multiply = function(a, b) {

return a * b;

};

// 调用

console.log(multiply(3, 4)); // 输出：12

3. 形参和实参

形参：函数声明时定义的参数（如'function add(a, b)'中的'a'、'b'）

实参：调用函数时传入的具体值（如'add(2, 3)'中的'2'、'3'）

实参数量可与形参不同：

function log(a, b) {

console.log(a, b);

}

log(1); // 输出：1 undefined（实参不足，多余形参为undefined）

log(1, 2, 3); // 输出：1 2（实参过多，多余实参被忽略）

4.函数的返回值

通过'return'语句返回结果，执行'return'后函数立即终止

无'return'或'return'后无值，默认返回'undefined'

示例：

function isPositive(num) {

if (num > 0) {

return true; // 满足条件时返回

}

return false; // 其他情况返回（可省略，默认返回undefined）

}

5. 函数作用域

函数内部声明的变量（'let'/'const'/'var'）仅在函数内部可见

外部无法访问函数内部的变量，内部可访问外部变量（作用域链）

const outer = "外部变量";

function test() {

const inner = "内部变量";

console.log(outer); // 可访问外部变量："外部变量"

}

test();

console.log(inner); // 报错：inner is not defined（外部无法访问内部）

3.2 对象

1.对象的创建

（1）对象字面量

const obj = {

键1: 值1,

键2: 值2,

方法名: function() { ... } // 方法定义

};

示例：

// 创建包含属性和方法的对象

const person = {

name: "张三",

age: 20,

sayHello: function() {

console.log('你好，我是${this.name}');

}

};

// 访问属性和方法

console.log(person.name); // "张三"

person.sayHello(); // "你好，我是张三"

（2）构造函数

通过自定义构造函数创建对象，适合批量创建结构相同的对象。

// 定义构造函数（首字母通常大写，区分普通函数）

function 构造函数名(参数1, 参数2) {

this.属性1 = 参数1;

this.属性2 = 参数2;

this.方法 = function() { ... };

}

// 使用 new 关键字创建实例

const obj = new 构造函数名(值1, 值2);

示例：

// 定义构造函数

function Person(name, age) {

this.name = name;

this.age = age;

this.sayHi = function() {

console.log('我叫${this.name}，${this.age}岁');

};

}

// 创建实例

const person1 = new Person("李四", 25);

const person2 = new Person("王五", 30);

person1.sayHi(); // "我叫李四，25岁"

person2.sayHi(); // "我叫王五，30岁"

（3）'Object' 构造函数

const obj = new Object(); // 创建空对象

obj.属性1 = 值1; // 动态添加属性

obj.方法 = function() { ... }; // 动态添加方法

示例：

const car = new Object();

car.brand = "特斯拉";

car.color = "白色";

car.drive = function() {

console.log('${this.brand}启动了');

};

console.log(car.brand); // "特斯拉"

car.drive(); // "特斯拉启动了"

2.对象的使用

（1）对象的遍历

对象的遍历是指访问对象中的所有成员。在JavaScript中，使用for…in语法可以实现对象的遍历，其语法格式如下。

for (var 变量 in 对象) {

具体操作

}

变量表示对象中的成员名；对象表示需要进行遍历的对象；在具体操作中，可以通过“console.log(对象[变量])”访问对象的属性，通过“对象[变量]()”调用对象的方法。

// 准备一个待遍历的学生对象student

var student = {

name: '小智',

sex: '男',

age: 20

};

// 遍历学生对象student

for (var a in student) {

console.log(a);

console.log(student[a]);

}

（2）Math对象

Math对象表示数学对象，用于进行与数学相关的运算，该对象不是构造函数，不需要实例化，可以直接使用其属性和方法。

示例：

a = Math.pow(3, 4);

console.log(a); // 输出结果为：81

console.log(Math.sqrt(a)); // 输出结果为：9

（3）时间和日期对象

使用Date()构造函数创建日期对象省略参数表示使用系统当前时间

var date01 = new Date();

console.log(date01);

使用Date()构造函数创建日期对象时，可以传入以数字表示的年、月、日、时、分、秒参数，并且最少需要指定年、月两个参数

var date02 = new Date(2023, 12-1, 13, 09, 35, 40);

console.log(date02);

使用Date()构造函数创建日期对象时，可以传入以字符串表示的日期和时间，字符串中最少需要指定年份

var date03 = new Date('2023-12-13 15:05:33');

console.log(date03);

// 输出结果为：Wed Dec 13 2023 15:05:33 GMT+0800 (中国标准时间)

4实验内容

1.编写一个JavaScript程序，实现距离某个节日的倒计时，输出节日名称和时间、当前时间和倒计时。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>春节倒计时</title>

</head>

<body>

<h1>春节倒计时</h1>

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

<script>

function updateCountdown() {

const now = new Date();

let halloween = new Date("2026-02-17T00:00:00");

if (now > halloween) {

halloween.setFullYear(now.getFullYear() + 1);

}

const diff = halloween - now;

const days = Math.floor(diff / (1000 * 60 * 60 * 24));

const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((diff % (1000 * 60)) / 1000);

const currentTimeStr = now.toLocaleString();

const halloweenStr = halloween.toLocaleDateString('zh-CN', {

year: 'numeric',

month: 'long',

day: 'numeric',

weekday: 'long'

});

document.getElementById('countdown').innerHTML = `

<p>当前时间: ${currentTimeStr}</p>

<p>春节日期: ${halloweenStr}</p>

<p>距离春节还有: ${days}天 ${hours}时 ${minutes}分 ${seconds}秒</p>

`;

}

updateCountdown();

setInterval(updateCountdown, 1000);

</script>

</body>

</html>

2.编写一个JavaScript程序，实现统计从1累加到200所需的运行时间。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>累加运行时间统计</title>

</head>

<body>

<p id="result"></p>

<script>

const startTime = performance.now();

let sum = 0;

for (let i = 1; i <= 200; i++) {

sum += i;

}

const endTime = performance.now();

const runTime = endTime - startTime;

document.getElementById("result").textContent = `从 1 累加到 200 的和为：${sum}，运行时间为：${runTime.toFixed(3)} 毫秒`;

</script>

</body>

</html>

3.编写函数，实现计算用户给定的半径的圆的周长和面积。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>计算圆的周长和面积</title>

</head>

<body>

<input type="number" id="radius" placeholder="请输入圆的半径">

<button onclick="calculateCircle()">计算</button>

<p id="result"></p>

<script>

function calculateCircle() {

const radius = parseFloat(document.getElementById("radius").value);

const circumference = 2 * Math.PI * radius;

const area = Math.PI * radius * radius;

document.getElementById("result").textContent =

`圆的周长为：${circumference.toFixed(2)}，圆的面积为：${area.toFixed(2)}`;

}

</script>

</body>

</html>

附加题（选做）：

1.编写函数生成指定长度的随机密码，要求包含大小写字母、数字和特殊字符（至少各 1 个，放入数组中），使用Math.random() 随机选取。

<!DOCTYPE html>

<html>

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

flex-direction: column;

align-items: center;

margin-top: 50px;

}

.container {

text-align: center;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

}

input, button {

margin: 10px;

padding: 8px;

font-size: 16px;

}

#password {

padding: 10px;

margin: 10px;

border: 1px solid #ccc;

border-radius: 4px;

min-width: 300px;

word-break: break-all;

}

</style>

</head>

<body>

<div class="container">

<h2>随机密码生成器</h2>

<label for="length">密码长度 (至少4位):</label>

<input type="number" id="length" min="4" value="8">

<button onclick="generatePassword()">生成密码</button>

<div id="password"></div>

</div>

<script>

const upperChars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

const lowerChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

const numberChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

const specialChars = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-', '_', '=', '+', '[', ']', '{', '}', '|', ';', ':', ',', '.', '<', '>', '?', '/'];

function generatePassword() {

const lengthInput = document.getElementById('length');

const length = Math.max(4, parseInt(lengthInput.value) || 8);

let passwordChars = [

getRandomChar(upperChars),

getRandomChar(lowerChars),

getRandomChar(numberChars),

getRandomChar(specialChars)

];

const allChars = [...upperChars, ...lowerChars, ...numberChars, ...specialChars];

for (let i = 4; i < length; i++) {

passwordChars.push(getRandomChar(allChars));

}

shuffleArray(passwordChars);

const password = passwordChars.join('');

document.getElementById('password').textContent = password;

}

function getRandomChar(charArray) {

const randomIndex = Math.floor(Math.random() * charArray.length);

return charArray[randomIndex];

}

function shuffleArray(array) {

for (let i = array.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[array[i], array[j]] = [array[j], array[i]];

}

}

</script>

</body>

</html>

2.编写函数实现字符串加密与解密，要求实现两个函数：encrypt(str)将字符串每个字符转为 ASCII 码后加 5，再转为字符（如 "abc"→"fgh"），decrypt(str)将加密后的字符串解密（减 5 还原），输入字符串进行测试，先加密再解密，验证结果是否与原字符串一致。

<!DOCTYPE html>

<html lang="zh-CN">

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

max-width: 600px;

margin: 20px auto;

padding: 20px;

}

.container {

display: flex;

flex-direction: column;

gap: 15px;

}

input, textarea {

padding: 8px;

font-size: 16px;

}

button {

padding: 10px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

font-size: 16px;

}

button:hover {

background-color: #45a049;

}

.result {

margin-top: 20px;

padding: 10px;

border: 1px solid #ddd;

}

.success {

color: green;

}

.error {

color: red;

}

</style>

</head>

<body>

<div class="container">

<h2>字符串加密解密工具</h2>

<label for="originalStr">请输入原始字符串：</label>

<input type="text" id="originalStr" placeholder="例如：abc123">

<button onclick="processEncryption()">执行加密解密</button>

<div class="result">

<p>加密后：<span id="encryptedResult"></span></p>

<p>解密后：<span id="decryptedResult"></span></p>

<p id="validation" class="success"></p>

</div>

</div>

<script>

function encrypt(str) {

let encrypted = [];

for (let i = 0; i < str.length; i++) {

let charCode = str.charCodeAt(i) + 5;

encrypted.push(String.fromCharCode(charCode));

}

return encrypted.join('');

}

function decrypt(str) {

let decrypted = [];

for (let i = 0; i < str.length; i++) {

let charCode = str.charCodeAt(i) - 5;

decrypted.push(String.fromCharCode(charCode));

}

return decrypted.join('');

}

function processEncryption() {

const original = document.getElementById('originalStr').value;

const encrypted = encrypt(original);

const decrypted = decrypt(encrypted);

document.getElementById('encryptedResult').textContent = encrypted;

document.getElementById('decryptedResult').textContent = decrypted;

const validationEl = document.getElementById('validation');

if (decrypted === original) {

validationEl.textContent = '验证成功：解密结果与原字符串一致';

validationEl.className = 'success';

} else {

validationEl.textContent = '验证失败：解密结果与原字符串不一致';

validationEl.className = 'error';

}

}

</script>

</body>

</html>

3.编写函数生成一个包含 10 个随机整数（1-100）的数组，将每个数转为字符串后，筛选出包含数字 "5" 的字符串，最后拼接成以逗号分隔的新字符串。要求输出原始数组和生成的字符串。

<!DOCTYPE html>

<html lang="zh-CN">

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

max-width: 800px;

margin: 20px auto;

padding: 0 20px;

line-height: 1.6;

}

.container {

padding: 20px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: #f9f9f9;

}

h1 {

color: #333;

text-align: center;

}

.result-box {

margin: 15px 0;

padding: 10px;

border-radius: 4px;

}

.original {

background-color: #e3f2fd;

}

.filtered {

background-color: #e8f5e9;

}

button {

padding: 8px 16px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

margin-top: 10px;

}

button:hover {

background-color: #45a049;

}

</style>

</head>

<body>

<div class="container">

<h1>随机数组处理工具</h1>

<p>点击下方按钮生成一个包含10个1-100随机整数的数组，并筛选出包含数字"5"的元素：</p>

<button onclick="processArray()">生成并处理数组</button>

<div class="result-box original">

<strong>原始数组：</strong>

<span id="originalArray">- 未生成 -</span>

</div>

<div class="result-box filtered">

<strong>包含数字"5"的字符串（逗号分隔）：</strong>

<span id="filteredString">- 未生成 -</span>

</div>

</div>

<script>

function generateRandomArray() {

const arr = [];

for (let i = 0; i < 10; i++) {

const randomNum = Math.floor(Math.random() * 100) + 1;

arr.push(randomNum);

}

return arr;

}

function processArray() {

const originalArray = generateRandomArray();

const filtered = originalArray

.map(num => num.toString())

.filter(str => str.includes('5'));

const resultString = filtered.join(',');

document.getElementById('originalArray').textContent = originalArray.join(', ');

document.getElementById('filteredString').textContent = resultString || '无包含数字"5"的元素';

}

</script>

</body>

</html>

实验5 验证用户输入

1 实验目的

（1）掌握使用JavaScript开发简单网页的方法；

（2）掌握函数的定义和调用方法；

（3）掌握字符串对象的创建和使用方法；

（4）掌握数组对象的创建和使用方法。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1 字符串对象

1. 字面量创建

直接使用单引号（'）、双引号（"）或反引号（`，ES6 模板字符串）：

const str1 = 'hello'; // 单引号

const str2 = "world"; // 双引号

const str3 = `hello ${str2}`; // 模板字符串（支持变量和换行）

2. 构造函数创建

通过 new String() 创建字符串对象（返回对象类型，而非原始值）：

const strObj = new String('test');

console.log(typeof strObj); // "object"（注意与原始值的区别）

console.log(strObj.valueOf()); // "test"（获取原始值）

3.length：返回字符串的长度（字符个数）

const str = 'hello';

console.log(str.length); // 5

4. 获取指定字符

charAt(index)：返回指定索引的字符（索引从 0 开始）

const str = 'hello';

console.log(str.charAt(1)); // "e"（索引1的字符）

console.log(str.charAt(10)); // ""（索引越界返回空字符串）

charCodeAt(index)：返回指定索引字符的 Unicode 编码（用于字符编码转换）

console.log('A'.charCodeAt(0)); // 65（A的Unicode编码）

console.log('中'.charCodeAt(0)); // 20013（中文“中”的编码）

5. 截取字符串

slice(start, end)：从 start 索引截取到 end 索引（不包含 end），支持负索引（从末尾计算）

const str = 'abcdef';

console.log(str.slice(1, 4)); // "bcd"（索引1到3）

console.log(str.slice(2)); // "cdef"（从索引2截取到末尾）

console.log(str.slice(-3)); // "def"（负索引：从末尾第3个开始）

substring(start, end)：类似 slice，但不支持负索引，且 start > end 时会自动交换

const str = 'abcdef';

console.log(str.substring(4, 1)); // "bcd"（自动交换为1-4）

console.log(str.substring(-2, 3)); // "abc"（负索引视为0）

substr(start, length)：从 start 索引开始，截取指定长度（注意：部分浏览器已弃用，建议用 slice）

const str = 'abcdef';

console.log(str.substr(1, 3)); // "bcd"（从索引1开始，取3个字符）

6. 查找与匹配

indexOf(searchValue, fromIndex)：返回子串首次出现的索引，找不到返回 -1

const str = 'hello world';

console.log(str.indexOf('o')); // 4（首次出现的索引）

console.log(str.indexOf('o', 5)); // 7（从索引5开始查找）

lastIndexOf(searchValue)：返回子串最后一次出现的索引

const str = 'hello world';

console.log(str.lastIndexOf('o')); // 7

includes(searchValue)：判断是否包含子串，返回布尔值（ES6+）

const str = 'hello';

console.log(str.includes('ll')); // true

console.log(str.includes('x')); // false

startsWith(searchValue, position)：判断是否以子串开头（ES6+）

const str = 'hello world';

console.log(str.startsWith('hello')); // true

console.log(str.startsWith('world', 6)); // true（从索引6开始判断）

endsWith(searchValue, length)：判断是否以子串结尾（ES6+）

const str = 'hello world';

console.log(str.endsWith('world')); // true

console.log(str.endsWith('llo', 5)); // true（只看前5个字符：'hello'）

7. 替换与分割

replace(searchValue, replacement)：替换子串（默认只替换第一个匹配项，可用正则实现全局替换）

const str = 'hello world';

console.log(str.replace('l', 'x')); // "hexlo world"（只替换第一个l）

console.log(str.replace(/l/g, 'x')); // "hexxo worxd"（全局替换所有l）

split(separator, limit)：将字符串按分隔符分割为数组

const str = 'a,b,c,d';

console.log(str.split(',')); // ["a", "b", "c", "d"]

console.log(str.split(',', 2)); // ["a", "b"]（限制返回2个元素）

console.log('hello'.split('')); // ["h", "e", "l", "l", "o"]（按字符分割）

8. 大小写转换

toUpperCase()：转为大写

console.log('hello'.toUpperCase()); // "HELLO"

toLowerCase()：转为小写

console.log('HELLO'.toLowerCase()); // "hello"

9. 去除空格

trim()：去除首尾空格（不影响中间空格）

const str = ' hello world ';

console.log(str.trim()); // "hello world"

4实验内容

1、编写JS程序，实现对用户输入信息进行验证。要求：

用户名：3-16 个字符，仅允许字母、数字和下划线

电子邮箱：验证有效的邮箱格式

密码：至少 8 个字符，必须包含字母和数字

2、编写JS程序，输入一段英文文本（20个以上的单词），要求：

提取所有单词（忽略标点，单词以空格分隔）

去除重复单词（不区分大小写，如 "Hello" 和 "hello" 视为同一单词）

按单词长度从短到长排序，长度相同则按字母顺序排序

输出处理后的单词列表（每个单词首字母大写）

附加题（选做）：

1、请编写代码，实现根据系统时间显示问候语的功能，通过改变div的内容显示不同的问候语，具体要求如下。

6 点之前，显示问候语“凌晨好”。
9 点之前，显示问候语“早上好”。
12 点之前，显示问候语“上午好”。
14 点之前，显示问候语“中午好”。
17 点之前，显示问候语“下午好”。
19 点之前，显示问候语“傍晚好”。
22 点之前，显示问候语“晚上好”。

2、编写程序，输入一段字符（20个以上），统计输入字符串中每个字符（含空格、标点）的出现次数，忽略大小写（如 'A' 和 'a' 视为同一字符），并按出现次数从高到低输出前3个字符。

3、有一组学生成绩数据 [85, 92, 58, 73, 98, 66, 45, 88]，编写JS代码，完成以下操作：筛选出及格分数（≥60）；将分数转为等级（90-100 为 'A'，80-89 为 'B'，60-79 为 'C'）以数组形式输出；计算及格分数的平均分（保留 1 位小数）；以字符串形式输出结果："及格等级：A,B,C，平均分：X.X.X"。

实验6 键盘事件

1 实验目的

（1）掌握使用JavaScript开发简单网页的方法；

（2）掌握事件的注册和调用方法；

（3）熟悉常用的虚拟键码和代表按键；

（4）能够使用键盘事件对象进行键盘操作。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1 键盘事件

1. 常用的键盘事件

事件名称	事件触发时机
keypress	按键盘按键时触发（“Shift”“Fn”“Caps Lock等非字符键除外）
keydown	按键盘按键时触发
keyup	键盘按键弹起时触发

2. 常见的虚拟键码和代表的按键

键盘事件触发后，通过事件对象的keyCode属性可以获取键码，从而确定用户按的按键。需要注意的是，keypress事件获得的键码是ASCII，keydown事件和keyup事件获得的键码是虚拟键码。keypress事件区分字母大小写，keydown事件和keyup事件不区分字母大小写。

常见的虚拟键码和代表的按键：

虚拟键码48~57：代表横排数字键0~9。

虚拟键码65~90：代表字母键A~Z。

虚拟键码13：代表“Enter”键。

虚拟键码27：代表“Esc”键。

虚拟键码32：代表“Space”键。即空格键。

虚拟键码37~40：代表方向键左、上、右、下

3.键盘事件对象

键盘事件对象KeyBoardEvent，该对象是与键盘事件相关的一系列信息的集合。根据键盘事件对象中的keyCode属性可以得到相应的ASCII值，从而判断用户按了哪个按键。

例如：要求检测用户是否按了键盘上的“A”键，如果用户按了“A”键，就把光标定位到文本框内，示例代码如下。

<body>

var search = document.querySelector('input');

document.addEventListener('keyup', function (e) {

if (e.keyCode === 65) {

search.focus();

}

});

</script>

</body>

4实验内容

1、编写JS程序，实现小方块根据键盘上下左右移动的效果，不得移出大方块的区域。

提示：

1、先生成两个Div嵌套的页面，实现大方块里面嵌套小方块

2、设置两个Div的样式，可参考下面的代码，也可自行设计样式：

<style>

#box{

width: 400px;

height: 400px;

background: burlywood;

margin: auto;

position: relative;

overflow: hidden;

}

#fj{

width: 50px;

height: 50px;

background: red;

position: absolute;

top: 300px;

left: 150px;

}

</style>

（2）虚拟键码37~40：代表方向键左、上、右、下

（3）给小方块绑定键盘事件，调整小方块的位置，调整时可以设置相对于大方块

的位置偏移量属性例如左边就是style.left，设置比如每次向左移动5px，可以获取

当前的位置再减去5px，这里用offsetLeft属性；如果是上下就是要用style.top和

offsetTop属性。

附加题（可选做）

创建一个页面，包含一个红色方块和信息显示区。通过方向键（上、下、左、右）控制方块移动，每次移动 10px，同时在信息区显示当前按下的按键名称和方块实时坐标。

实验7 双色球摇号和刮刮乐

1 实验目的

（1）掌握使用JavaScript开发简单网页的方法；

（2）掌握JavaScript中文档对象模型的使用；

（3）掌握JavaScript中的鼠标事件；

（4）掌握随机数生成方法和数组的用法。

2 实验环境及要求

硬件：PC 机、鼠标、键盘；

软件：Win7/Win 8/Win10、office工具、VSCode软件。

3 实验原理

3.1 鼠标事件

1. 常用的鼠标事件

事件名称	事件触发时机
click	当单击时触发
dblclick	当双击时触发
mouseover	当鼠标指针移入时触发（当前元素与其子元素都触发）
mouseout	当鼠标指针移出时触发（当前元素与其子元素都触发）
mouseenter	当鼠标指针移入时触发（子元素不触发）
mouseleave	当鼠标指针移出时触发（子元素不触发）
mousedown	当按任意鼠标按键时触发
mouseup	当释放任意鼠标按键时触发
mousemove	在元素内当鼠标指针移动时持续触发