第03章-前端核心技术-JavaScript数组
第03章-前端核心技术-JavaScript数组
学习目标
掌握JavaScript数组的申明和初始化
掌握JavaScript数组遍历的方法 重点
掌握JavaScript数组增删改查的方法 重点 难点
掌握JavaScript数组的内置函数 重点
掌握JavaScript函数的高级运用
JavaScript数组
什么是数组?
数组是使用单独的变量名来存储一系列的多个值。如：可以用数组来保存一个会员用户的用户名、帐号、密码、电话号码等等。
创建数组
创建一个数组，有2种方法
使用new Array(“张三”,“zhangshan”)创建数组
//创建名字为user的数组，里面有四个值
var user = new Array("张三","zhangshan","123456","13594876584");
//或者
var user = new Array();
user[0] = "张三";
user[1] = "zhangshan";
user[2] = "123456";
user[3] = "13594876584";
使用方括号var user = [“张三”,“zhangshan”]
1```
2
//创建名字为user的数组，里面有四个值
var user = ["张三","zhangshan","123456","13594876584"];
数组存储
栈内存 - 用于存储局部变量，数据使用完（程序退出局部变量作用域后），所占内存自动释放。
堆内存 - 用于存储数组和对象，通过new建立的实例都存放在堆内存中。
普通变量和数组的保存方式不同，如下图：
访问数组元素
通过指定数组名以及索引号码，可以访问某个特定的元素，如：[0] 是数组的第一个元素。[1] 是数组的第二个元素
//创建名字为user的数组，里面有四个值
var user = new Array("张三","zhangshan","123456","13594876584");
//访问数组很简单，只需要使用方括号加下标
alert(user[0]); //会弹窗输出“张三”
//修改数组值
user[0] = "李四";//把数组中第1个元素的值修改为“李四”
user[1] = "lisi";//把数组中第2个元素的值修改为“lisi”
user[2] = "789";//把数组中第3个元素的值修改为“789”
user[3] = "13569845684";//把数组中第4个元素的值修改为“13569845684”
数组遍历
数组的遍历通常使用for循环，for循环 for / in简写的循环。通过数组的length属性获取数组的长度
//创建名字为user的数组，里面有四个值
var user = new Array("张三","zhangshan","123456","13594876584");
for (var i in user) {
document.write(user[i]+"
");
}
//user.length:获取User数组的长度（个数）
for (var i=0;i<user.length;i++) {
document.write(user[i]+"
");
}
删除数组元素
数组的长度在数组被初始化的时候确定，如需删除数组中的元素，应该把需要删除的元素移到数组的末尾，然后将数组的长度减1
案例01
如需删除中间的元素，需要把该元素后面的所以元素往前移动一个位置，然后将数组长度减1。
案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//创建一个空的数组
$num = new Array();
//用循环给数组初始化10个数据（1···10）
for (i = 0;i < 10;$ i++) {
$num[i] = i + 1;
}
//删除第3个数，需要把第3个数后面的数全部往前移动一位
for(i = 2,temp = 0;i < 10;i++){
$num[i] = num[i+1];
}
$num.length = 9;
//输出显示删除后的结果
for($a in $num){
document.write($num[$a]+" ");
}
</script>
</html>
效果：
添加数组元素
如果是在数组末尾添加数组元素，操作很简单，只需要增加一个下标就可以了
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//创建一个空的数组
num = new Array();
//用循环给数组初始化10个数据（1···10）
for (i = 0;i < 10;i++) {
num[i] = i + 1;
}
//在数组末尾添加一个数据
num[10] = 100;
//输出显示删除后的结果
for(a in num){
document.write(num[a]+" ");
}
</script>
</html>
效果：
如果要在数组中间插入数据，那就需要使用循环，从需要加入数据的位置开始，讲后面的数据往后移动一位，然后在该位置上插入数据。
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//创建一个空的数组
num = new Array();
//用循环给数组初始化10个数据（1···10）
for (i = 0;i < 10;i++) {
num[i] = i + 1;
}
//在数组第5个位置添加一个数据
for (i = 10;i > 5;i--) {
num[i] = i - 1;
}
num[4] = 500;
//输出显示删除后的结果
for(a in num){
document.write(num[a]+" ");
}
</script>
</html>
效果：
添加元素
如果需要向 HTML 中添加新元素，那么首先便需要创建该元素，然后向已存在的元素追加创建的新元素。
document.createElement() 方法用来创建新的 Element 节点和 Text 节点，而方法 node.appendChild() 可以用来将创建好的元素添加到一个文档，其具体实现方法如下。
<div id="my_div">
</div>
<script>
var element = document.createElement("p");
element.append("这是段落");
document.getElementById("my_div").appendChild(element);
</script>
修改元素
修改元素包含三个部分的内容：修改元素内容、修改元素属性和修改元素样式。
①修改元素的内容
修改元素内容的最简单方法便是使用 innerHTML 属性，使用该属性可以对元素的内容重新赋值，从而达到修改元素内容的效果，其使用方法如下所示：
document.getElementById("my_div").innerHTML = "
这是一个段落
";②修改元素属性
在得到需要的元素以后，就可以设法获取它的各个属性，getAttribute() 方法就是专门用来获取元素属性的，相应的也可以使用 setAttribute() 方法来更改元素节点的属性值。
案例：
<div id="my_div" title="哈哈哈"></div>
<script>
alert(document.getElementById("my_div").getAttribute("title"));
</script>
setAttribute() 方法是用来设置属性的,它允许对属性节点的值做出修改，与getAtribute方法一样, 它也是只能用于元素节点，其使用方法如下所示:
object.setAttribute(attribut e,value);
案例：
<div id="my_div" title="哈哈哈">
div
</div>
<script>
document.getElementById("my_div").setAttribute("title","嘻嘻嘻")
</script>
③修改元素的样式
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
删除元素
如果需要在 HTML 中删除元素，首先便需要获得该元素，然后得到该元素的父元素，最后通过 removeChild 方法删除该元素，其实现流程如下。
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
案例：
<div>
<p>不被删除的节点</p>
<p id="p1">要被删除的节点</p>
</div>
<script>
var child = document.getElementById( "p1");
child.parentNode.removeChild(child);
</script>
JavaScript 函数（高级）
函数参数
函数名后面的括号里面写的就是参数。参数的作用就是用于函数内部和函数外部数据的传递。也就是说：可以通过参数把函数外面的数据传入函数内部，并在内部使用，而且不会改变外部数据的值。
参数其实也就是变量。
语法：
function functionName(parameter1, parameter2, parameter3) {
// 要执行的代码……
}
参数的个数不限
6
function getNumber1(number){
alert(number);
}
function getNumber2(n1,n2){
alert(n1 + n2);
}
参数只能在函数内部使用，不可以在函数外使用函数内的参数和变量。如：
function getNumber3($number){
$number = 100;
}
document.write($number); // 报错
形参和实参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 全局变量
var arr=[ 1, true,9,8]
// 下标i=1 999
// var i=1
function add(i,v=555){//形参//i为局部变量
if(i>0&&i<arr.length){//如果在这个范围内就执行
// 添加最后一个
if(i==arr.length){
// arr[arr.length]=999//最后一个添加
arr[arr.length]=v
}else{
for (var j = arr.length-1; j>=i;j--) {//任意位置添加
arr[j+1]=arr[j]//j+1 最后一个加1
}
// arr[i]=999
arr[i]=v
}
console.log(arr)
}
}
add(3,666)//实参
</script>
</html>
会出现如下错误提示
表示未定义的变量。
参数内也不能使用外面没有的变量。如：
function getNumber3($number){
$inner = $number;
}
会出现如下错误提示
通用方法：删除第n个：
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');
//删除第N个数据
function deletes(n) {
for(var i = n - 1; i < arr.length-1; i++) {
arr[i] = arr[i + 1]
}
arr.length -= 1;
}
deletes(4);
document.write(arr);
通用方法：在第N个数前插入
var arr = new Array(45, 88, 66, 45, 12, 58, 656, 'dsada', 'fdsaffas');
//[前面]插入数据
function add(n,data) {
if(n > arr.length) {
arr[arr.length] = data;
} else {
for(var i = arr.length; i >= n - 1; i--) {
arr[i] = arr[i - 1]
}
arr[n - 1] = data;
}
}
add(3,999);
document.write(arr);
变量的作用域
变量的位置不同，分为全局变量和局部变量
全局变量
- 作用范围是所有代码块，也就是说在任何一个位置都可以直接访问全局变量
局部变量 - 作用范围是某一个代码块内部，也就是说只能在当前代码块内部使用。
案例05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"/>-->
<style>
table {
border-collapse: collapse;
margin: auto;
}
th, td {
border: 6px solid gray;
text-align: center;
width: 60px;
height: 60px;
}
th input {
height: 35px;
width: 90%;
font-size: 20px;
text-align: center;
}
td button {
font-size: 20px;
width: 60px;
height: 60px;
margin: 0;
padding: 15px;
}
td:nth-child(4n) button {
background-color: blueviolet;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4"><input type="text" id="show"/></th>
</tr>
<tr>
<td>
<button onclick="getNumber(7)">7</button>
</td>
<td>
<button onclick="getNumber(8)">8</button>
</td>
<td>
<button onclick="getNumber(9)">9</button>
</td>
<td>
<button onclick="getChar('*')">*</button>
</td>
</tr>
<tr>
<td>
<button onclick="getNumber(4)">4</button>
</td>
<td>
<button onclick="getNumber(5)">5</button>
</td>
<td>
<button onclick="getNumber(6)">6</button>
</td>
<td>
<button onclick="getChar('/')">/</button>
</td>
</tr>
<tr>
<td>
<button onclick="getNumber(1)">1</button>
</td>
<td>
<button onclick="getNumber(2)">2</button>
</td>
<td>
<button onclick="getNumber(3)">3</button>
</td>
<td>
<button onclick="getChar('+')">+</button>
</td>
</tr>
<tr>
<td>
<button onclick="del()">c</button>
</td>
<td>
<button onclick="getNumber(0)">0</button>
</td>
<td>
<button onclick="compute('=')">=</button>
</td>
<td>
<button onclick="getChar('-')">-</button>
</td>
</tr>
</table>
</body>
<!--<script src="js/js.js" type="text/javascript" charset="utf-8"></script>-->
<script>
number = ''; //保存每次点击的数字（全局变量）
up = ''; //保存上次点击的数字 （全局变量）
char = '' //保存点击的运算符号（全局变量）
/**
获取计算机按钮按下的数字
*/
function getNumber(n) {
number += '' + n;
document.getElementById('show').value += n;
console.log('数字：' + number + '----上一个数字：' + up);
}
/**
获取计算机按钮按下的符号
*/
function getChar(c) {
char = c;//把按下的符号键保存到char变量里面
up = number;//把上一个数字保存到up变量里面
number = ''//把number变量重新变为空字符串，便于记录下一个数字
console.log('符号：' + char + '----上一个数字：' + up);
document.getElementById('show').value += c;
}
/**
计算结果
*/
function compute() {
up = parseInt(up);
number = parseInt(number);
switch (char) {
case '':
document.getElementById('show').value = (up * number);
break;
case '/':
document.getElementById('show').value = (up / number);
break;
case '+':
document.getElementById('show').value = (up + number);
break;
case '-':
document.getElementById('show').value = (up - number);
break;
default:
break;
}
}
/**
删除
*/
function del() {
up = '';
number = '';
document.getElementById('show').value = '';
}
</script>
</html>
效果图
Web Storage：
Web Storage 是 HTML5 改良了 Cookie 存储机制后，新推出的本地存储机制，其作用是把网站中有用的信息存储到本地，然后根据实际需要从本地读取信息，主要分为 SessionStorage 和 LocalStorage 两种类型，其功能和用法基本上是相同的，只是保存数据的生存期限不同。SessionStorage 内容只存在浏览器关闭之前，浏览器一旦关闭则数据全部清空，而 localStorage 可以保存在浏览器关闭并重启后还存在。
Storage 对象在创建时会有一个相应的(key/value)键/值对列表可供访问，列表中的每一个键/值对称为数据项。Key 可以是任何字符串，Value 是简单的字符串。Storage 对象的属性和方法具体如下：
①length：返回当前 Storage 对象里保存的键/值对数量。
②key(index)：该方法返回 Storage 中第 index 个键(key)的名称。键的顺序是由浏览器定义的，只要键的数量不改变，键的顺序也是不变的(添加或删除键会改变键的顺序，而仅仅改变已存在键对应的值不会改变键的顺序)。如果 index 大于等于键/值对的数量，则该方法返回值为空。
③getItem(key)：该方法返回指定 key 对应的当前值。如果指定的 key 在当前 Storage 对象的键/值对列表中不存在，则该方法返回值为空。
④setItem(key,value)：该方法首先检测指定的键/值对的键是否已存在于当前键值对列表。如果不存在，就把该键/值对添加到对象键/值对列表;如果存在，则进一步判断旧值与新值是否相等，如果不等，则用新值更新旧值，如果相等，则不做任何改变。
⑤removeItem(key)：该方法从 Storage 对象键/值对列表中删除指定键对应的数据项。key 对应的数据项不存在时不做任何改变。
⑥clear()：当前Storage对象键/值对列表中有数据项时，清空键/值对列表。对于空的键值对列表，不做任何改变。
localStorage.setItem("key",1);
var key = localStorage.getItem("key");
也可以简写为
localStorage.key=1;
var key = localStorage.key;
案例1：
<div id="my_div">
<p>不被删除的节点</p>
<p id="p1">要被删除的节点</p>
<button onclick="deleteNode()">删除</button>
<button onclick="addNode()">添加</button>
</div>
<script>
if (localStorage.getItem("deleteP1")=="1"){
let child = document.getElementById("p1");
child.parentNode.removeChild(child);
}
function deleteNode() {
let child = document.getElementById("p1");
child.parentNode.removeChild(child);
localStorage.setItem("deleteP1","1")
}
function addNode() {
let child = document.getElementById("my_div");
let element = document.createElement("p");
element.append("要被删除的节点");
element.setAttribute("id","p1")
child.appendChild(element)
localStorage.setItem("deleteP1","0")
}
</script>
案例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
localStorage.setItem("name","张三")
if(localStorage.getItem("name")!=null){
alert("key存在")
}else{
alert("key不存在")
}
sessionStorage.setItem("pwd","123456")
if(sessionStorage.getItem("name")!=null){
alert("key存在")
}else{
alert("key不存在")
}
// localStorage.clear(name)
</script>
</html>
定时任务和延时操作
setInterval()
window.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
var label = setInterval(function, milliseconds, param1, param2, ...)
clearInterval()
window.clearInterval() 取消由 setInterval() 设置的 timeout。
js
clearInterval(label)
在实际开发中经常使用定时任务和延时操作，JavaScript 提供相应的 API 完成该操作。
定时任务：setInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
或
简写
var id = setInterval(function () {
console.info(i);
i++;
if (i == 8) {
// 到8的时候停
clearInterval(id);
}
}, 1000)
</script>
</html>
使用 setInterval（function，时间）完成定时任务的开启，该方法的返回值是一个任务 id 类型为一个数字。使用 clearInterval 清除定时任务
延时操作：setTimeout
window.setTimeout() 在指定的毫秒数后调用函数或计算表达式。
var label = setTimeout(function, milliseconds, param1, param2, ...)
clearTimeout()
window.clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
clearTimeout(label)
setTimeout(function () {
alert("三秒后弹出")
}, 3000)
使用 setTimeout（function，时间）完成延时操作。和 setInterval 一样时间的单位是毫秒 1000 毫秒=1秒。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function fun(){
console.log("你好);
// java 递归
setTimeout(fun,1000)
}
fun()
</script>
</html>
函数参数数组Arguments
参数数组又叫可变参数，可以接受任意多个参数，而且创建函数的适合不需要指定参数的个数，再使用函数的时候确定参数个数即可。
案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
function test(a,b,c){
console.log(a)
console.log(b)
console.log(c)
for (let s of arguments) {
console.log(s)
}
}
test(1,4,56,7)
</script>
</html>
函数返回值
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
9
//定义函数
function myFunction() {
var x = 5;
return x;//在这里返回一个值，并且结束函数
console.log(x);//这条语句不会执行
}
//使用函数
var ret = myFunction()//使用函数的时候会获得函数的返回值，并保存在ret变量里
JavaScript数组API
concat()
连接两个或多个数组
array1.concat(array2, array3, ... , arrayX);
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
arr1 = new Array("10","12");
arr2 = new Array("a","bb","ccc");
arr3 = new Array("哈哈","嘿嘿");
result = arr1.concat(arr2,arr3);
document.write(result);
</script>
</html>
效果展示
fill()
用一个固定值替换数组的元素
array.fill(value, start, end);
注意: IE 11 及更早版本不支持 fill() 方法。
案例08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
arr1 = new Array("10","12","哈哈");
arr1.fill('XXXX',1,5);
document.write(arr1);
</script>
</html>
效果展示
案例：
<script>
arr1=[1,2,3,4,5,6]
arr2=[1,2,3,4,5,6]
arr1.fill("xx",2,4)
console.log(arr1)
</script>
join()&toString()
数组变成字符串
案例09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$r = $arr1.join();
$b = $arr1.toString();
document.write($r);
document.write("<br/>");
document.write($b);
</script>
</html>
效果展示
把字符串分割为字符串数组string.split(separator,limit)
队列 ：
特征 ：先进先出
栈：
先进后出
push()
向数组末尾添加一个或多个元素，并返回新的长度
array.push(item1, item2, ..., itemX);
案例10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$r = $arr1.push("你是谁");
document.write($arr1);
document.write("<br/>");
document.write($r);
</script>
</html>
效果展示
pop()
删除数组的最后一个元素并返回删除的元素
案例11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$r = $arr1.pop();
document.write($arr1);
document.write("<br/>");
document.write($r);
</script>
</html>
效果展示
unshift()
向数组的开头添加一个或更多元素，并返回新的长度
array.unshift(item1,item2, ..., itemX)
案例12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$r = $arr1.unshift("多啦阿曼","分化");
document.write($arr1);
document.write("<br/>");
document.write($r);
</script>
</html>
效果展示
shift()
删除并返回数组的第一个元素
案例13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$r = $arr1.shift();
document.write($arr1);
document.write("<br/>");
document.write($r);
</script>
</html>
效果展示
reverse()
反转数组的元素顺序
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$arr1 = new Array("10","12","哈哈");
$arr1.reverse();
document.write($arr1);
</script>
</html>
效果：
slice()
提取数组部分元素
语法：
array.slice(start, end);
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
arr =["x",2,3,5,7]
console.log(arr);
var a=arr.slice(1,3)
console.log(a);
</script>
</html>
参数 Values
参数描述start可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
返回值
Type描述Array返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
splice()
添加/删除项目，然后返回被删除的项目
该方法会改变原始数组。
语法：
arrayObject.splice(index,howmany,item1,.....,itemX);
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
arr =["x",2,3,5,7]
// 删除
/**
* 3的位置 即确定了删除的位置
* 2的位置 即确定了删除的位置
*/
// arr.splice(3,2)
// console.log(arr);
// 修改
/**
* 3的位置 即确定了删除的位置 和添加的位置
* 2的位置 即确定了删除的位置 和添加的位置
*/
// arr.splice(3,2,55,77)
// console.log(arr);
// 纯插入一个数，第一个位置不变，第二个为0
arr.splice(3,0,55,77)
console.log(arr);
</script>
</html>
参数
参数描述index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。item1, …, itemX可选。向数组添加的新项目。
forEach()
调用数组的每个元素
注意: forEach() 对于空数组是不会执行回调函数的。
array.forEach(function(currentValue, index, arr), thisValue)
参数
参数描述function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。 函数参数:currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。thisValue可选。传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值
js
// forEach(function(value,index,array)) 循环
// 类似于let循环，相当于有n个index变量
arr.forEach(function(value,index,array){
console.log(index,value)
});
every()
检测数组所有元素是否都符合指定条件
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。
js
array.every(function(currentValue,index,arr), thisValue)
参数
参数描述function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象thisValue可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”
案例
// every:判断数组中每一个元素是否都符合要求
result = arr.every(function(value,index,array){
if(value < 10){
return true;
}
return false;
});
console.log(result);
some()
检测数组中的元素至少有一个满足指定条件
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
array.some(function(currentValue,index,arr),thisValue)
参数
参数描述function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象thisValue可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”
案例
// some:判断数组中每一个元素是否都符合要求
result = arr.some(function(value,index,array){
if(value < 10){
return true;
}
return false;
});
console.log(result);
filter()
检查指定数组中符合条件的所有元素
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
js
array.filter(function(currentValue,index,arr), thisValue)
参数
参数描述function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象thisValue可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”
案例：
// filter:判断数组中每一个元素是否都符合要求
result = arr.filter(function(value,index,array){
if(value %10==0){
return value;
或
if(value < 10){
return value;
}
});
console.log(result);
find()
````
返回符合条件的数组的第一个元素的值。
获取第一个数
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。
````
array.find(function(currentValue, index, arr),thisValue)
````
参数
参数描述function(currentValue, index,arr)必需。数组每个元素需要执行的函数。 函数参数:currentValue必需。当前元素index可选。当前元素的索引值arr可选。当前元素所属的数组对象thisValue可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值
案例：
````
// find:判断数组中每一个元素是否都符合要求
result = arr.find(function(value,index,array){
if(value < 10){
return value;
}
});
console.log(result);
map()
````
返回原始数组元素调用函数处理后的新数组
map() 方法按照原始数组元素顺序依次处理元素。
map对数组进行修改
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
````
array.map(function(currentValue,index,arr), thisValue)
````
参数
参数描述function(currentValue, index,arr)必须。函数，数组中的每个元素都会执行这个函数 函数参数:currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象thisValue可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
案例:
````
// map:对数组中的元素统一处理
result = arr.map(function(value,index,array){
return value * value;
});
console.log(result);
````
reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：
参数描述function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数。*total*必需。*初始值*, 或者计算结束后的返回值。*currentValue*必需。当前元素。*currentIndex*可选。当前元素的索引*arr*可选。当前元素所属的数组对象。initialValue可选。传递给函数的初始值
如：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击按钮后对数组元素进行四舍五入并计算总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素之和: <span id="demo"></span></p>
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>
</body>
</html>
````
效果：
for循环
````
// 数组的遍历
arr = [1,2,3,4,5,6,7,8,9,"aaa1",true,false];
// 普通for循环,公用一个i
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i])
}
// 增强for循环,相当于有n个i变量
for (let i = 0; i < arr.length; i++) {
//console.log(arr[i])
}
// 增强for循环,i是下标，数组和对象
for (let i in arr) {
//console.log(arr[i])
}
// 增强for循环,i是值，数组和对象
for (let s of arr) {
//console.log(s)
}
````
JavaScript数组排序
冒泡排序
冒泡排序的基本思想是，对相邻的元素进行两两比较，顺序相反则进行交换，这样，每一趟会将最小或最大的元素“浮”到顶端，最终达到完全有序
冒泡排序（Bubble Sorting）的基本思想是：通过依次从前向后（从下标 0 的元素开始），依次比较相邻元素的大小，若发现前面大于后面则交换，使值较大的元素逐渐从前部移向后部（从下标较小的单元移向下标较大的单元），就象水底下的气泡一样逐渐向上冒。
因为排序的过程中，最大的元素不断往后靠，循环的判断的次数也在不断减少，从而减少不必要的比较。
案例07
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
var arr=[8,3,2,1,7,4,6,5]
for (var j = 0; j< arr.length; j++) {
for (var i = 0; i < arr.length-1; i++) {
var temp=0;
if (arr[i]>arr[i+1]) {
temp=arr[i+1]
arr[i+1]=arr[i]
arr[i]=temp
}
}
}
console.log(arr)
document.write(arr)
</script>
</html>
````
效果展示
选择排序
简单选择排序是最简单直观的一种算法，基本思想为每一趟从待排序的数据元素中选择最小（或最大）的一个元素作为首元素，直到所有元素排完为止，简单选择排序是不稳定排序。
选择排序（Select Sorting）也是一种简单的排序方法。它的基本思想是：第一次从 R[0]-R[n-1] 中选取最小值，与 R[0] 交换，第二次从 R[1]-R[n-1] 中选取最小值，与 R[1] 交换，第三次从 R[2]-R[n-1] 中选取最小值，与 R[2]交换，...，第 i 次从 R[i-1]-R[n-1]中选取最小值，与 R[i-1] 交换，...，第 n-1 次从 R[n-2]-R[n-1]中选取最小值，与 R[n-2] 交换，总共通过 n-1 次，得到一个按排序码从小到大排列的有序序列。
案例08
````
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
var arr = [8, 3, 2, 1, 7, 4, 6, 5]
var temp = 0;
for (var i1 = 0; i1 < arr.length; i1++) {
var min = arr[i1];
var minIndex = i1;
for (var i = i1 + 1; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i];
minIndex = i;
}
}
temp = arr[i1];
arr[i1] = min;
arr[minIndex] = temp;
}
console.log(arr)
document.write(arr)
</script>
</html>
````
效果展示
直接插入排序
直接插入排序基本思想是每一步将一个待排序的记录，插入到前面已经排好序的有序序列中去，直到插完所有元素为止。
案例09
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$min = 7
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 直接插入排序（插入排序）
* 求：
* 把数组从小到大排序
* 思路：
* 从第二个数开始，把当前这个数和前面的所有数进行比较
* 如果比前面的某个数小
* 和交换前面那个数交换顺序
*/
for ($i=0; $i<$nums.length;$i++) {
for ($j=$i; $j>0;$j--) {
if ($nums[$j] < $nums[$j-1]) {
$temp = $nums[$j];
$nums[$j] = $nums[$j-1];
$nums[$j-1] = $temp;
}
}
}
document.write($nums);
</script>
</html>
````
作业
1.完成如下要求
使用循环改变HTML中表格中单元格的样式：让奇数个单元格字体颜色变成红色
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程表</title>
<style type="text/css">
.colo{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1">
<caption>课程表</caption>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="3">上午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
</tr>
<tr>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
</tr>
</table>
</body>
<script type="text/javascript">
//获取到标签的数组
tds = document.getElementsByTagName('td');//通过标签名称来获取
for (i = 0;i < tds.length;i++) {
//把单元格奇数个改变颜色
if (i % 2 != 0) {
temp = tds[i].innerHTML;
tds[i].innerHTML = '<span class="color">'+ temp +'</span>';
}
}
</script>
</html>
````
2.有如下数组，输出所有小于50的数
````
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
/**
* 求：输出所有小于50的数
*/
for(i = 0;i < nums.length; i++) { //50
for(j = 0;j < nums[i].length; j++) {
if (nums[i][j] < 50) {
document.write(nums[i][j] + " , ");
}
}
}
</script>
</html>
````
3.有如下数组，求所有两位数的数字的和
````
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [
[12, 55, 4, 65, 178, 15, 33, 66, 594, 225],
[56, 87, 225, 49, 124, 33],
[59, 23, 26, 45, 48, 65, 987, 222],
[33, 24, 5, 94, 1, 649, 616, 456, 21],
[111, 222, 555, 378]
];
/**
* 求：输出所有两位数的数字的和
*/
sum = 0;
for(i = 0;i < nums.length; i++) { //5
for(j = 0;j < nums[i].length; j++) {
if (nums[i][j] > 9 && nums[i][j] < 100) {
sum += nums[i][j];
}
}
}
document.write(sum);
</script>
</html>
````
4.有如下数组，输出所有女生的除了性别之外的所有信息
````
var student = [
[“张三”,“男”,“13594876584”,“美男”],
[“李四”,“男”,“13594876555”,“美男”],
[“范冰冰”,“女”,“13595468456”,“美女”],
[“大桥”,“女”,“13595548569”,“美女”],
[“吕布”,“男”,“13578945658”,“美男”],
[“刘备”,“男”,“13576954874”,“美男”],
[“哪咤”,“男”,“13579548455”,“美男”],
[“甄姬”,“女”,“13587459548”,“美女”]
];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var student = [
["张三", "男", "13594876584", "美男"],
["李四", "男", "13594876555", "美男"],
["范冰冰", "女", "13595468456", "美女"],
["大桥", "女", "13595548569", "美女"],
["吕布", "男", "13578945658", "美男"],
["刘备", "男", "13576954874", "美男"],
["哪咤", "男", "13579548455", "美男"],
["甄姬", "女", "13587459548", "美女"]
];
/**
* 求：输出所有女学生
*/
for(i = 0; i < student.length; $i++) {
if(student[i][1] == "女") {
for(j = 0; j < student[i].length; j++) {
if(j == 1) {
continue; //跳过本次，继续下次
}
document.write(student[i][j] + " , ");
}
document.write("<br/>");
}
}
</script>
</html>
````
5.有如下数组，删除第二个数，并输出新的数组 （选做）
````
var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 250];
/**
* 求：删除第二个数
* 后面的数据全部往前移动一位
* 长度-1
*/
for ($i = 4;$i < $nums.length;$i++) {
$nums[$i-1] = $nums[$i];
}
$nums.length -= 1;
document.write($nums)
</script>
</html>
````
6.有如下数组，在第五个数据的位置插入999. （选做）
````
var $nums = [12, 55, 4, 65, 178, 15, 33, 66, 594, 225];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [12, 55, 4, 65,178, 15, 33, 66, 594, 250];
/**
* 求：在第五个位置上添加999
* 后面的数据全部往后移动一位
*/
for ($i = $nums.length;$i > 5;$i--) {
$nums[$i] = $nums[$i-1];
}
$nums[5] = 999;
document.write($nums)
</script>
</html>
````
7.有如下两个数组 （选做）
````
var $nums = [12, 55, 4, 65,178];
var $chars = [‘hello’, ‘hi’, ‘how are you’];
````
把$nums和$chars两个数组合并成一个数组
把保存后的结果保存到$new变量里面
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var nums = [12, 55, 4, 65,178];//5
var chars = ['hello', 'hi', 'how are you'];//3
var new;
/**
* 求：
* 把nums和chars两个数组合并成一个一维数组
* 把保存后的结果保存到$new变量里面
*/
count = nums.length + chars.length;
//5
for (i=nums.length;i < count;i++) {
nums[i] = chars[i+chars.length-count]//3
}
$new = $nums;
document.write($new)
</script>
</html>
````
8有如下数组，用冒泡排序将所有数据从小到大排序 （选做）
````
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 交换排序（冒泡排序）
* 求：
* 把数组从小到大排序
* 思路：
* 把数组中每一个数跟这个数后面的所有数进行比较
* 如果后面的某一个数比这个数小
* 就交换两个数的位置
*/
for ($i = 0;$i < $nums.length;$i++) {
for ($j = $i;$j < $nums.length;$j++) {
if($nums[$i] > $nums[$j]){
temp = $nums[$i];
$nums[$i] = $nums[$j];
$nums[$j] = temp;
}
}
}
document.write($nums);
</script>
</html>
````
9.有如下数组，用选择排序将所有数据从小到大排序（选做）
````
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4]
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
$min = 7
var $nums = [12, 55, 4, 65,178,215,236,2,48,69,78,356,4];
/**
* 交换排序（选择排序）
* 求：
* 把数组从小到大排序
* 思路：
* 把数组中每一个数跟这个数后面的所有数进行比较
* 如果后面的某一个数比这个数小
* 就交换两个数的位置
*/
for ($i = 0;$i < $nums.length;$i++) {
$min = $i;
for ($j = $i+1;$j < $nums.length;$j++) {
if($nums[$min] > $nums[$j]){
$min = $j;
}
}
if($min != $j){
$temp = $nums[$i];
$nums[$i] = $nums[$min];
$nums[$min] = $temp;
}
}
document.write($nums);
</script>
</html>
````
10.用循环实现两个数组拼接
````
var arr1 = new Array(45, 88, 66, 45, 12, 58, 656, ‘dsada’, ‘fdsaffas’);
var arr2 = new Array(44, 6435, 6756, 786, 12, 58, 656, ‘f’, ‘fgfd’);
````
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var arr1 = new Array(45,88,66,45,12,58,656,'dsada','fdsaffas');//44(9)
var arr2 = new Array(44,6435,6756,786,12,58,656,'f','fgfd');
//把连个数组拼接成一个数组,并且保存第一个数组里面
function concat(){
for (var i=0;i<arr2.length;i++) {
arr1[arr1.length] = arr2[i]
}
document.write(arr1);
}
concat()
</script>
````
</html>
11.用循环实现将一个数组反转
````
var arr = new Array(45, 88, 66, 45, 12, 58, 656, ‘dsada’);
````
效果：
参考代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var arr = new Array(45,88,66,45,12,58,656,'dsada');
//反转元素
function reverse(){//8=4
//偶数个
for(var i=0;i<arr.length/2;i++){
var temp = arr[i];
arr[i] = arr[arr.length-i-1];
arr[arr.length-i-1] = temp;
}
document.write(arr);
}
reverse();
</script>
</html>
````
12.要求：大写字母排版：将 css 篇的 display 练习使用循环输出 A-Z 全部字符。
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子和边练习</title>
<style>
* {
padding: 0;
margin: 0;
}
#content {
margin: 10px auto;
border: 2px dotted #000000;
width: 600px;
display: table;
}
#content div {
background: #907e35;
display: inline-block;
width: 180px;
height: 180px;
margin: 10px;
text-align: center;
color: white;
line-height: 180px;
font-size: 100px;
}
</style>
</head>
<body>
<div id="content">
</div>
<script>
for (let i = 65; i < 91; i++) {
let element = document.createElement("div");
element.append(String.fromCharCode(i));
document.getElementById("content").appendChild(element);
}
</script>
</body>
</html>
````
13.要求：使用三个按钮控制 HTML 文档的 body 的背景颜色。
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子和边练习</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: dodgerblue;
}
.btn-group {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
}
.btn-group button {
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
border: none;
font-size: 25px;
}
</style>
</head>
<body>
<div class="btn-group">
<button onclick="changeColor('dodgerblue')">dodgerblue</button>
<button onclick="changeColor('purple')">purple</button>
<button onclick="changeColor('gray')">gray</button>
</div>
<script>
function changeColor(str) {
document.body.style.backgroundColor = str;
}
</script>
</body>
</html>
````
14.要求：.表格指定删除：排版如下表格，并增加删除按钮，在点击删除按钮时能正常删除该条数据。
效果
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格指定删除</title>
<style>
* {
padding: 0;
margin: 0;
}
table {
width: 600px;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
table td, table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th {
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #F5FAFA;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>工资</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td>1</td>
<td>张三</td>
<td>3000</td>
<td>
<button onclick="deleteUser(this)">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>4000</td>
<td>
<button onclick="deleteUser(this)">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>3500</td>
<td>
<button onclick="deleteUser(this)">删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>麻子</td>
<td>3800</td>
<td>
<button onclick="deleteUser(this)">删除</button>
</td>
</tr>
</tbody>
</table>
<script>
function deleteUser(obj) {
//obj.parentNode.parentNode.remove();
let tr = obj.parentNode.parentNode;
let tab = document.getElementById("tableData")
tab.removeChild(tr);
}
</script>
</body>
</html>
````
15.要求：.做一个基于内存的用户系统，在页面不刷新时，能完成用户的增删改查。
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>章节练习</title>
<style>
* {
margin: 0;
padding: 0
}
table {
width: 600px;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
table td, table th {
border: 1px solid #cad9ea;
color: #666;
height: 30px;
}
table thead th {
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd) {
background: #fff;
}
table tr:nth-child(even) {
background: #F5FAFA;
}
input {
width: 70px;
}
button {
display: inline-block;
padding: 4px 8px;
margin: 0 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>工资</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
<script>
var arr = [
{id: 1, name: "张三", sal: 3000},
{id: 2, name: "李四", sal: 4000},
{id: 3, name: "王二", sal: 3500},
{id: 4, name: "麻子", sal: 3800}];
// if (localStorage.userInfo) {
// arr = JSON.parse(localStorage.userInfo);
// }
function loadData() {
// localStorage.userInfo = JSON.stringify(arr);
var str = "";
arr.forEach((o, index) => {
//`` 模板字符串 ；作用1 可以多行拼接2 可以在拼接中插入变量3 可以进行简单的运算4 可以互相嵌套5 简单，方便，整洁
str += `<tr><td>${o.id}</td><td>${o.name}</td><td>${o.sal}</td>
<td><button onclick="updateUser(${index})">修改</button><button onclick="deleteUser(${index})">删除</button></td></tr>`
})
str += `<tr><td><input id="userId"></td><td><input id="userName"></td><td><input id="userSal"></td>
<td><button onclick="saveData()">保存</button><button onclick="cancel()">取消</button></td></tr>`
document.getElementById("tableData").innerHTML = str;
}
loadData();
function deleteUser(index) {
arr.splice(index, 1);
loadData();
}
var updateIndex = -1;
function updateUser(index) {
updateIndex = index;
document.getElementById("userId").value = arr[index].id;
document.getElementById("userName").value = arr[index].name;
document.getElementById("userSal").value = arr[index].sal;
}
function saveData() {
var id = document.getElementById("userId").value;
var name = document.getElementById("userName").value;
var sal = document.getElementById("userSal").value;
if (updateIndex == -1) {
arr.push({id: id, name: name, sal: sal})
} else {
arr.forEach(o => {
if (o.id == id) {
o.name = name;
o.sal = sal;
}
})
}
loadData();
updateIndex = -1;
}
function cancel() {
document.getElementById("userId").value = "";
document.getElementById("userName").value = "";
document.getElementById("userSal").value = "";
updateIndex = -1;
}
</script>
</body>
</html>
````
16要 求：做一个时间实时显示的页面。
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: black;
color: white;
font-size: 40px;
text-align: center;
}
p span {
border: 2px solid #333;
padding: 10px 4px;
}
</style>
</head>
<body>
<p id="time">
</p>
<script>
getTime();
function getTime() {
let date = new Date();
let hours = formatTime(date.getHours());
let minutes = formatTime(date.getMinutes());
let seconds = formatTime(date.getSeconds());
document.getElementById('time').innerHTML = hours + " : " + minutes + " : " + seconds;
setTimeout("getTime()", 500);
}
function formatTime(i) {
if (i < 10) {
i = "<span>0</span> <span>" + i + "</span>";
} else {
let j = i.toString().charAt(0);
let z = i.toString().charAt(1);
i = "<span>" + j + "</span> <span>" + z + "</span>";
}
return i;
}
</script>
</body>
</html>
````
17.使用js完成以下效果
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>electronic calculator</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
padding: 20px;
text-align: center;
color: #FFFFFF;
font-weight: bolder;
font-size: 28px;
}
div {
width: 400px;
height: 705px;
}
.box-big {
border: 1px solid black;
width: 450px;
height: 758px;
background-color: black;
margin: 40px auto;
}
.box {
padding: 10px;
width: 400px;
margin: 10px auto;
border: white solid 2px;
background-color: black;
}
.input {
height: 50px;
font-size: 15px;
line-height: 50px;
text-align: right;
padding: 10px 10px;
color: #FFFFFF;
}
hr {
width: 418px;
float: left;
margin-left: -10px;
}
.box4 button {
width: 90px;
height: 90px;
border: none;
float: left;
margin: 5px;
line-height: 90px;
font-size: 30px;
border-radius: 4px;
background-color: white;
color: black;
}
.box3 {
clear: left;
width: 380px;
height: 20px;
text-align: center;
margin-top: -268px;
color: darkkhaki;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box-big">
<div class="box">
<h2>超级计算器 </h2>
<hr>
<p class="input" id="input" style="font-size: large">Please enter the number </p>
<hr>
<div class="box4">
<button onclick="clearText()">C</button>
<button onclick="backSpace()">←</button>
<button onclick="add('(')">(</button>
<button onclick="add(')')">)</button>
<button onclick="add('7')">7</button>
<button onclick="add('8')">8</button>
<button onclick="add('9')">9</button>
<button onclick="add('%')">%</button>
<button onclick="add('4')">4</button>
<button onclick="add('5')">5</button>
<button onclick="add('6')">6</button>
<button onclick="add('*')">*</button>
<button onclick="add('1')">1</button>
<button onclick="add('2')">2</button>
<button onclick="add('3')">3</button>
<button onclick="add('-')">-</button>
<button onclick="add('0')">0</button>
<button onclick="add('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="add('+')">+</button>
</div>
<div class="box3">
中 国 制 造
</div>
</div>
</div>
<script>
function add(C) {
if (document.getElementById("input").innerText == "Please enter the number") {
document.getElementById("input").innerText = ""
document.getElementById("input").innerText += C;
return;
}
document.getElementById("input").innerText += C;
}
function calculate() {
let str = document.getElementById("input").innerText;
document.getElementById("input").innerText = eval(str);
localStorage.input = document.getElementById("input").innerText;
}
function clearText() {
document.getElementById("input").innerText = "";
localStorage.clear();
}
function backSpace() {
let str = document.getElementById("input").innerText;
document.getElementById("input").innerText = str.substr(0, str.length - 1);
localStorage.input= document.getElementById("input").innerText
}
</script>
</body>
</html>
````
18：1.变身小怪兽：创建一个 HTML 页面 上面有一张图片，“变大”，“变小”，“暂停” 三个按钮控制图片大小。当变大按钮被点击时，图片以每秒 30 px 的速度变大，其他按钮相同道理控制图片。
效果：
参考代码：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>章节练习</title>
<style>
.btn-group {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
}
.btn-group button {
width: 150px;
height: 50px;
background: #1e69e8;
text-align: center;
line-height: 50px;
border: none;
color: white;
font-size: 30px;
}
img {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img src="img/小怪兽.jpg" width="200">
<div class="btn-group">
<button onclick="big()">变大</button>
<button onclick="stop()">停止</button>
<button onclick="small()">变小</button>
</div>
<script>
var index = 0;
function big() {
if (index == 0) {
index = setInterval(function () {
document.getElementsByTagName("img")[0].width += 3;
}, 100)
}
}
function small() {
if (index == 0) {
index = setInterval(function () {
document.getElementsByTagName("img")[0].width -= 3;
}, 100)
}
}
function stop() {
clearInterval(index);
index = 0;
}
</script>
</body>
</html>
````
11.实现如下效果
效果图：
要求：
.在页面创建 3 个按钮，内容分别为“题一“，“题二“....，点击时调用下面的方法。
1.方法1：在控制台打印 1~1000 之间所有能同时被 3，5，7 整除的整数。
2.方法2：创建一个数组存放全部学生的名字，点击“题二“按钮每次随机弹出（alert）一个学生，一直把所有的学生弹出完后弹出提示，已经没有学生可以弹出。
3.方法3：点击后弹出当前的系统时间，格式为 yyyy年MM月dd日HH:mm:ss
参考代码
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>章节练习</title>
<script>
function t1() {
for (var i = 0; i < 1000; i++) {
if (i % 3 == 0 && i % 5 == 0 && i % 7 == 0) {
console.info(i)
}
}
}
var arr = ["张三", "李四", "王二", "麻子"];
function t2() {
if (arr.length == 0) {
alert("已经没有学生可以弹出")
return;
}
var i = Math.floor(Math.random() * arr.length);
alert(arr[i]);
arr.splice(i, 1);
}
function t3() {
var date = new Date();
alert(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + " " +
date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())
}
</script>
</head>
<body>
<button onclick="t1()">题一</button>
<button onclick="t2()">题二</button>
<button onclick="t3()">题三</button>
</body>
</html>
````
浙公网安备 33010602011771号