JS

JavaScript是一种运行于JavaScript解释器/引擎中的解释性脚本语言。

JS基本语法

运行环境：
- 1，独立安装的JS解释器（NodeJS）
- 2，嵌入在【浏览器】内核中JS解释器

解释型：运行前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。
编译型：对源码进行编译，还能检查语法错误（C/C++）

JS组成

1，核心（ECMAScript）。eg:可以进行+-*/运算

2，文档对象模型（DOM），让JS有能力与网页进行对话。eg:单击按钮可以改变文字的大小

3，浏览器对象模型（BOM）让JS有能力与浏览器进行对话。eg:单击按钮可以出现浏览器

JS特点

1，开发工具简单，记事本

2，不需要编译，直接由JS引擎负责执行。

3，弱类型语言有数据类型来决定数据类型。

4，面向对象。

JS基本语法

浏览器内核的作用

负责页面内容的渲染。内核主要由两部分组成：

1，内容排版引擎解析HTML和CSS

2,脚本解释引擎解析JavaScript。

3，不同浏览器内核不同。

JS运行环境
1，直接在浏览器Console中输入并执行JS
2，将JS脚本嵌入在HTML页面中执行。

JS使用方法

1.将JS代码嵌入在元素“事件”中：

onlick:当单击元素时所做的操作

<html>
    <body>
        <button onclick="console.log('Hello World');">
            打印消息
        </button>
    </body>
</html>

console.log:注意单双引号的使用。

2.将JS代码嵌入在<script>标记中

允许出现网页的任意位置处

<html>
    <body>
        页头
        <hr/>
        <script>
            document.write('<b>欢迎</b>');//输出“欢迎”两个字
            console.log('脚本执行结束了...');
        </script>
        <hr/>
        页尾
    </body>
</html>

3.将JS代码写在外部脚本文件中（**.js）

1.创建JS文件，并编写JS代码 ***.js

2.在页面中引入js 文件

<html>
    <head>
        <script src="myscript.js"></script>
    </head>
    <body>
    </body>
</html>

注意如果script中引入src属性即src="a.js"再在下面内容中写入js代码是错误的。

4.语法规范

4.1 语句

允许被JS引擎所解释的代码

使用分号来表示结束

大小写敏感

英文标点符号

由表达式、关键字、运算符组成

4.2 注释

单行注释：//

多行注释：/* */

sublime text中 Ctrl+/

4.3 js在html中引用

JS变量

1. 什么是变量

内存：保存程序在运行过程中，所需要用到的数据8bit=1byte

1024byte=1kB

1024KB=1MB

1024MB=1GB

1024GB=1TB

变量：就是内存中的一段存储空间

名：内存空间的别名，可以自定义

值：保存在内存空间中的数据

2.变量的声明

声明：var变量名；

赋值：

变量名=值；

2.1语法

注意：声明过程中，尽量不要省略var关键字，否则生命的是“全局变量”

声明一个变量，保存值为25
声明并直接赋值：
在console.log()或document.write()使用变量名取代“”，打印变量stuName的值到控制台上：
一次性声明多个变量并赋值
变量名命名规范
- 不允许使用JS的关键字和保留关键字
- 由字母，数字，下划线以及$组成
  var stuName;
  var stuName1;
  var stu_name;
  var stu$name;
- 不能以数字开头
  var stuName1;
  var 1stuName:false
  var $stuName;true
- 尽量见名知意
  var a,b,c,d,ab,ac,ad;
  var stuName.stuAge;更推荐
- 可以采用“驼峰命名法
  变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符变大写
  var stuName;
  如果只有一个单词作为变量名，全小写
  var age;
变量的使用
5.1

5.2 变量未被定义过，直接打印或使用console.log(stuHeight);结果为错误

5.3 对变量进行的存取操作

1.获取变量的值-GET操作
2.保存（设置）变量的值-SET操作

3.数据类型

3.1 数据类型

number类型
1.可以表示32位的整数以及64位的浮点数
2.整数：32位即4字节
3.浮点数：即小数，64位，8字节
整数：var n1=0123;//八进制 var n2=0x123;//十六进制
小数：var n1=34.56; var n2=4.5e10;
字符串类型
1.表示一系列文本字符数据，由Unicode字符，数字，标点组成，Unicode下所有的字符，数字，标点在内存中都占2字节
2.“张”charCodeAt().toString(16)//结果为5f20(查看字符张的十六进制表现方式)
3.\u4e00:汉字的起始符 \u9fa5:汉字的结束符
布尔类型
1.作用：用于表示条件的结果
2.取值：true:真，肯定的结果；false:假，否定的结果；
3.空 null
4.未定义undefined
4.1.声明变量未赋值
4.2.访问对象不存在啊的属性
弱类型
var stu;//undefined
var stu=25;//number
var stu="25";//string类型

3.2.隐式转换

2.1 函数

typeof()或typeof

2.2 NaN

Not a Number不是一个数字

isNaN(数据)：判断数据是否为非数字

是不是一个数字

结果为boolean类型

结果为true : 不是一个数字

结果为 false：是一个数字

注：所有的数据类型与string 做+运算时，最后的结果都为string

3.3强制转换

3.1 toString()

将任意类型的数据转换为string 类型，变量.toString();会得到一个全新的结果，类型为string

3.2 parseInt()

整型：Integer
作用：获取指定数据的整数部分
语法：var result=parselnt(数据)；
注意：parselnt,从左向右依次转换，碰到第一个非整数字符，则停止转换，如果第一个字符就是非正式字符的话，结果为NaN

3.3 parseFloat()

Float:浮点类型->小数
作用：将指定数据转换成小数
语法：var result=parseFloat(数据)；

3.4 Number（）

作用:将一个字符串解析为number
语法：var reult=Number(数据)；
注意：如果包含非法字符，则返回NAN

4.运算符与表达式

4.1什么是运算符与表达式

运算符：能够完成数据计算的一组符号，比如：+-*/······

表达式：有运算符和操作数所组成的式子叫做表达式，每个表达式都有自己的值。15+8；var a=15; //a变量的值为15，整个表达式的值也是15；

4.2运算符

4.2.1 算术运算符

+，-，*，/，%；

"+"：可以表示链接

"%":判断数字的奇偶性or获取数字的最后几位。

自增 & 自减

++：自增，在数值的基础上，进行+1操作

--：自减，在数值的基础上，进行-1操作

4.3 关系运算符

作用：判断数据之间的大小关系
运算符
==：判断等于（不比较类型，只比较数值）
！=：不等于
===：全等（除数值之外，连同类型也会一起比较）
！==：不全等；
关系表达式的运算结果为boolean类型（true/false）
判断一个数据是否为数据类型
console.log(isNaN(input));
isNaN()会抛开数据类型来判断数据是否为数据，如果数据是数字类型，则返回false；否则返回true;

4.4 逻辑运算符

作用：关联条件
判断考试分数是否在60~80之间
逻辑运算符
逻辑与：&&；var result=score>=60&&score<=80;如果是则返回ture
逻辑或：||；var =result=bishi>=60||mainshi>=60;只要有一个满足条件为ture
逻辑非：！；对条件进行取反，只是一个操作数。
短路逻辑
1. 短路&&
  第一个条件为false，则不需要判断啊后面的条件，结果为false;
2. 短路||
  如果第一个条件的结果为true，则不需要判断第二个条件，结果为true。
条件运算符
1. 三目运算符：运算符需要三个操作
2. 语法：表达式1？表达式2：表达式3；
  表达式1成立true执行表达式2，不成立false执行表达式3。

JS函数

5.1 什么是函数

函数（function），也可以被称之为方法(method)，或过程(procedure)。
是一段预定义号，并可以被反复使用的代码块。其中可以包好多条可执行语句。
预定义好：事先声明好，但不被执行。
反复使用：允许被多个地方（元素函数中）所应用。
代码块：允许包含多条可执行的代码。
函数本质上是功能完整的对象。
函数的调用
执行函数的内容，任何 JS 的合法位置处，都允许调用函数
语法：函数名称（）；
定义函数的参数和返回值
parselnt(数据)；//将指定数据转换成整数
parseFloat(数据)；//将指定的数据转换为小数
console.log(“要打印的话”)；
- 定义带参数的函数
  参数列表：由一个或多个变量名称来组成，声明函数时定义的参数，可以称之为“形参”。
- 定义带返回值的函数
  1.声明
  2.调用
  var 变量=函数名（参数）；

5.2变量的作用域

什么是作用域
作用域：就是变量或函数的可访问的范围。它控制着变量或函数的可见性和生命周期
在 JS 中，变量或函数的作用域可分为：
a:函数作用域，只在当前函数内可访问
函数作用域内的变量（局部变量）
b:全局作用域，一经定义，代码的任何位置都可以访问。
函数作用域
全局作用域
声明提前
JS 在正式执行之前，会将所有的var 声明的变量和function声明的函数，预读到所在作用域的顶部但是，对变量的赋值，还保留在原来的位置处。
等同于以下
按值传递
传参时，实际上是对实参赋值了一份副本传给了函数。在函数体内对变量进行修改，实际上是不会影响到外部的实参变量的。

JS 分支结构

1. if -else

1.1 程序的流程控制

程序=数据+算法

程序的三种结构：

顺序结构
分支结构
循环结构

2. switch case

1.使用场合：优先用于等值判断的条件中

特殊的分支语句，可以i根据一个表达式的不同取值，从不同的程序入口开始执行。

<!DOCTYPE html>
<html>
<head>
    <title>D</title>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
     //根据商品单价和购买数量以及收款金额 计算并输出应收金额和找零。
    // 当总价大于后者等于500时享受8折优惠 
    //当收款金额小于应收金额，报错误，给出提示 
    // 定义输入变量：单价，数量，收款金额 -->
    var price,count,money;
    // 定义输出变量 ：总价。找零-->
    var total,change;
    //为输入变量赋值 -->
    price = prompt("请输入商品单价");
    count = prompt("请输入商品数量");
    //根据单价和数量计算出 商品总价 -->
    total = price*count;
    //console.log(total);
    //alert(total);//直接弹出框
    //判断，判断商品总价》=500，享受8折优惠
    if(total>=500){
        alert("您的消费金额已经大于等于500元，可以享受8折优惠");
        total = total*0.8;
    }
    alert("您此次一共消费:"+total+"元");
    //判断应收金额total和收款金额money之间的关系
    money = prompt("收款:");
    if (money>=total) {
        //计算找零
        change =money-total;
        alert("共找您"+change+"元");

    }else{
        alert("您给的钱不够，请多给点吧");
    }
    
</script>
    

</body>
</html>

循环结构
continue 关键字：用在循环中，用于终止本次循环，继续执行下次循环
Break 关键字：用在循环中，终止整个循环结构！！!
- while循环：先判断后执行
- do-while循环：先执行后判断
  先执行循环操作，再判断循环条件，如果条件为真，则继续执行循环操作，若果条件为假，则终止循环即退出循环。
  无论条件满足于否，至少要执行一次循环操作。
- for循环

//猜数字游戏
<!DOCTYPE html>
<html>
<head>
    <title>U</title>
    <meta charset="utf-8">
</head>
<body>
<script  type="text/javascript">
    //猜数字
    //1，生成一个随机数（100以内）
    var r = parseInt(Math.random()*100);

    do{
        var input = prompt("请用户输入一个数字");
        if(input > r){
            alert("您输入的数值大了");

        }else if(input < r){
            alert("您输入的值小了");
        }else{
            alert("您猜对了");
        }

    }while(input != r);
    alert("游戏结束");
</script>
</body>
</html>

JS数组

1 索引数组

下标为数字的数组

数组：
内存中连续存储多个数据的数据结构，在起一个名字。存储多个数据的时候使用数组。
创建数组
- 创建空数组：两种
  数组直接量：var arr=[];
  用new:var arr=new Array();//不知道数组中元素有多少时使用。
访问数组中元素
- 访问：下标，数组中唯一标识每个元素存储的位置的序号
- 特点：从0开始，连续不重复。
- 只要访问数组元素，只能用下标
- 数组名 [i]--用法和单个变量完全一样。
数组GET操作与SET操作
- set
- 获取数组元素的值：get
访问数组中的元素
数组的length属性：记录了数组中理论上的元素个数length属性的值永远是最大下标+1
数组的的遍历
遍历数组元素，通常选择for 循环语句，元素的下标作循环遍历
固定套路
- 获得数组最后一个元素：arr[arr.length-1]
- 获得倒数第n个元素的位置：arr[arr.length-n]
- 数组缩容：减小arr/length的数值，会删除结尾的多余元素
- 遍历数组：依次访问数组中每个元素，对每个元素执行相同的操作
特殊：三个不限制
- 不限制数组元素的个数：长度可变
- 不限制下标越界：
  获取元素值：不报错！返回undefined
  修改元素值：不报错！自动在指定位置创建新元素，并且自动修改length属性为最大下标+1
  如果下标不连续的数组--稀疏数组
- 不限制元素的数据类型

2 关联数组

可自定义下标名称的数组

数组
- 索引数组中数字下标没有明确的意义
- 只要希望每个元素都有专门的名称时，就使用关联数组
- 2步：
  - 创建空数组
  - 向空数组中添加新元素，并自定义下标名称。
创建方式
由于关联数组的length属性值无法获取其中元素的数量，所以遍历关联数组只能用 for...in循环

3 对比索引数组和关联数组

以字符串输出	不能用字符串输出
下标是数字	下标是自定义的字符串
length属性有效	length属性失效（=0）
访问元素都用数组名["下标"]	访问元素都用数组名["下标"]
可用for循环遍历	不能用for循环遍历——for in
查找遍历	hash数组查找不用遍历
受存储位置影响	和存储位置无关
受数组元素个数影响	和数组中元素个数无关

JS数组API

1 数组转换字符串

String（arr):将arr中每个元素转换为字符串，用逗号分隔
固定套路：对数组拍照：用于鉴别是否数组被修改过
- 将字符组成单词：chars.join("")->无缝拼接
  扩展：判断数组是空数组：arr.join("")==""
- 将单词组成句子：words.join("")
- 将数组转化为页面元素的内容：
arr.join(“连接符”)：将arr中每个元素转为字符串，用自定义的连接符分隔。

2 拼接和选取

不直接修改原数组，而返回新数组！

拼接： concat()拼接两个或更多的数组，并返回结果
选取：slice()返回现有数组的一个子数组
选取arr中starti位置开始，到endi结束的所有
元素组成新数组返回——原数组保持不变
强调：*凡是两个参数都是下标的函数，都有一个特性：含头不含尾
- 选取简写
  1 一直选取到结尾：可省略第二个参数
  2 如果选区的元素离结尾近：可用倒数下标
  arr.slice(arr.length-n,a,rr.length-m+1)
  简写为arr.slice(-n,-m+1);
  3 复制数组
  arr.slice(0,arr.length);
  简写为arr.slice();
修改数组
- 删除：splice 直接修改原数组
  删除arr中starti位置开始的n个元素不考虑含头不含尾
  其实，var deletes=arr.splice(starti,n);
  返回值deletes保存了被删除的元素组成的临时数组
- 插入
  arr.splice(starti,0,值1，值2，....)
  在arr中starti位置，插入新值1，值2...原starti位置及其以后的值被向后顺移。
- 替换：
  其实就是删除旧的，插入新的
  arr.splice(starti,n,值1，值2...)
  先删除arr中starti位置的n个值，再在starti位置插入
  强调：删除的元素个数和插入的新元素个数不必一致。
- 颠倒：
  reverse()颠倒数组中元素的顺序
  arr.reverse();
  console.log(arr1);
  强调：仅负责原样颠倒数组，不负责排序
- 排序
  将元素从小到大排序重新排列
  - 排序API：
    arr..sort():默认将所有元素转为字符串再排序
    只能排列字符串类型的元素，所以使用自定义比较器函数
  - 排序算法：
    冒泡快速插入排序

3 DOM

DOM：document object model
是W3C的标准，是中立于平台和语法的接口，

DOM查找

按id属性，精确查找一个元素对象

强调：getElementById只能用在document上

只能用在精确查找一个元素

不<是所有元素都有id

<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById("myList");
console.log(ul);

按标签名找
查找指定parent节点下的所有标签为tag的子节点。
强调：
- 可用在任意父元素上
- 不仅查看直接子节点，而且查所有子代节点
- 返回一个动态集合
  即使只找到一个元素，也返回集合，必须用[0],取出唯一元素
- 不但找直接节点，而且找所有子代。
```
<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById("menuList");
var list=ul.getElmentsByTagName("li");
console.log(ul);
```

name属性查找

document.getElmentsByName('name属性值')

可以返回DOM树中具有指定name属性值的所有子元素集合。

<form id="registerForm">
    <input type="checkbox"
           name="boy"/>
    <input type="checkbox"
           name="boy"/>
    <input type="checkbox"
           name="boy"/>
</form>

var list=document.getElementsByName('boy');
console.log(typeof list);

class查找

朝朝父元素下指定的class属性的元素

有兼容性问题：IE9+

<div id="news">
    <p class="main Title">
        新闻标题1
    </p>
    <p class="subTitle">
        新闻标题2
    </p>
    <p class="mainTitle">
        新闻标题3
    </p>
</div>

var div=document.getElementById('news');
var list=div.getElementsByClassName('main Title');
console.log(list);

通过css选择器查找
只找一个元素：
selector支持一切css中选择器
如果选择器匹配的有多个，只返回第一个
找多个：
selector API 返回的是非动态集合；
- 元素选择器
- 类选择器
- Id选择器
- 后代选择器
- 子代选择器
- 群组选择器

//产生随机验证码
<!DOCTYPE html>
<html>
<head>
    <title>D</title>
    <meta charset="utf-8">
    <style>
        #code{
            width:150px;
            height: 50px;
            background-color: lightblue;
            font-size: 44px;
            letter-spacing: 5px;//设置字符间距

        }
    </style>
</head>
<body>
    <script>
        function createRndCode(){
            var chars=['a','b','c','1','2','3'];
            var randCode="";
            for(var i=0;i<4;i++){
                var randPos= Math.floor(Math.random()*(chars.length-1));
                chars[randPos]//math.floor函数对产生的随机数取整，math.random()产生随机数，将0-1的范围扩展到0-chars数组长度减1的范围。由于作为下标所以要对乘起来的数取整。
                //产生了一个随机的位置
                randCode += chars[randPos];//将产生的随机位置连接到产生的随机验证码字符上，形成一个完整的随即验证码（位置+数值）
                //每次随机产生一个字符，，然后产生一个随机码
            }

            document.getElementById("code").innerHTML=randCode;//产生随机验证码
        }
    </script>
    <div id="code">
        
    </div>
    <button onclick="createRndCode()">验证码 </button>

</body>
</html>

DOM修改

DOM标准：

可操作一切结构化文档的API	专门操作hHTML文档的简化版DOM API
包括HTML和XML	仅对常用的复杂的API进行了简化
万能	不是万能的
繁琐	简单

开发：先用简单的，再用复杂的补充——以实线效果为目标

修改属性：

核心DOM4个操作：

读取属性值：2种
- 先获得属性节点对象，再获得节点对象的值：
- 直接获得属性值
修改属性值：elem.setAttribute("属性名"，value);
判断是否包含指定属性：
移除属性：elem.removeAttribute("属性名")

修改样式

内嵌样式：elem.style.属性名
强调：属性名：去横线，变驼峰
css:backgrouond-color=>backgroundColor
list-style-type=>listStyleType

4 DOM添加

添加元素步骤：

创建空元素
var elem=document.createElement("元素名")
设置关键属性
设置关键样式：
将元素添加到DOM树
- parentNode.appendChild(childNode)
  可用于将为一个父元素追加最后一个子节点
- parentNode,insertBefore(newChild,existingChild)

添加元素优化：

文档片段：内存中，临时保存多个平级子元素的虚拟父元素，用法和普通父元素完全一样。
创建片段：
2.将子元素div临时追加到frag种
3.将frag追加到页面
强调：append之后，frag自动释放，不会占用元素。

5 BOM

BOM

专门操作浏览器窗口的API——没有标准，有兼容性问题

浏览器对象模型：

代表整个窗口

封装当前窗口打开后，成功访问过的历史url记录

封装浏览器配置信息

封装当前正在加载的网页内容

封装当前窗口正在打开的url地址

封装了屏幕的信息

定义了网页中的事件机制

窗口大小：

完整窗口大小：

文档显示区大小：

定时器
- 定义：
  让程序按指定时间间隔自动自行任务
  网页动态效果、计时功能等
- 分类：
  周期性定时器：让程序按照指定时间间隔自动执行一项任务
  语法：
  停止定时器：
  1. 给定时器取名：
  2. 停止定时器
  一次性定时器
  让程序延迟一段时间执行
  语法：
- 只要反复执行，就用周期性。之要执行一次，就用一次性。

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

        }
        .container{
            width:300px;
            height: 300px;
            /*border: 1px solid #000;*/
            margin: 150px auto;//上下150px居中
            /*视觉距离*/
            perspective: 200000px;
        }
        .box{
            width: 300px;
            height: 300px;
            /*控制子元素3D转换*/
            transform-style: preserve-3d;
            /*测试代码，将盒子旋转*/
            transform: rotateX(45deg)rotateY(45deg);

        }
        .box-page{
            width: 300px;
            height: 300px;
            /*位置初始化*/
            position:absolute;
        }
        .top{
            background-color: red;
            transform: translateZ(150px);
        }
        .bottom{
            background-color:green ;
            transform: translateZ(-150px)rotateX(180deg);

        }
        .left{
            background-color: orange;
            transform: translateX(-150px)rotateY(-90deg);
        }
        .right{
            background-color: pink;
            transform: translateX(150px)rotateY(90deg);//沿着x轴移动150px，再沿着Y轴旋转90度

        }
        .before{
            background-color: blue;
            transform: translateY(150px)rotateX(-90deg);
        }
        .after{
            background-color: yellow;
            transform: translateY(-150px)rotateX(90deg);
        }
        
    </style>
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <div class="box">
            <div class="box-page top"></div>
            <div class="box-page bottom"></div>
            <div class="box-page left"></div>
            <div class="box-page right"></div>
            <div class="box-page before"></div>
            <div class="box-page after"></div>
            
        </div>
        
    </div>

</body>
</html>

//魔方中加入图片
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        .container{
            width:300px;
            height: 300px;
            /*border: 1px solid #000;*/
            margin: 150px auto;//上下150px居中
            /*视觉距离*/
            perspective: 200000px;
        }
        .box{
            width: 300px;
            height: 300px;
            /*控制子元素3D转换*/
            transform-style: preserve-3d;
            /*测试代码，将盒子旋转*/
            transform: rotateX(45deg)rotateY(45deg);

        }
        .box-page{
            width: 300px;
            height: 300px;
            /*位置初始化*/
            position:absolute;
        }
        .top{
            background-color: red;
            transform: translateZ(150px);
        }
        .bottom{
            background-color:green ;
            transform: translateZ(-150px)rotateX(180deg);

        }
        .left{
            background-color: orange;
            transform: translateX(-150px)rotateY(-90deg);
        }
        .right{
            background-color: pink;
            transform: translateX(150px)rotateY(90deg);//沿着x轴移动150px，再沿着Y轴旋转90度

        }
        .before{
            background-color: blue;
            transform: translateY(150px)rotateX(-90deg);
        }
        .after{
            background-color: yellow;
            transform: translateY(-150px)rotateX(90deg);
        }
        
    </style>
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <div class="box">
            <div class="box-page top"></div>
            <div class="box-page bottom"></div>
            <div class="box-page left"></div>
            <div class="box-page right"></div>
            <div class="box-page before"></div>
            <div class="box-page after"></div>
            
        </div>
        
    </div>
    <script type="text/javascript">
        var arr=document.querySelectorAll(".box-page")//document选择器查找，找所有的box-page
        // 遍历六个面中的每一个面for循环
        for(var n=0;n<arr.length;n++){
            arr[n];
            //外层循环行
            for(var r=0;r<3;r++){
                //内层循环遍历列
                for(var c=0;c<3;c++){
    //创建元素
var divs=document.createElement("div");//创建元素
divs.style.cssText="width:100px; height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image: url(img/a"+n+".jpg);background-size:300px 300px;";//创建元素以后追加样式，让每个元素位置都做一个初始化
arr[n].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX= -c*100+"px";
divs.style.backgroundPositionY= -r*100+"px";


    }
    }
    }
</script>

</body>
</html>

//魔方整体代码：
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        .container{
            width:300px;
            height: 300px;
            /*border: 1px solid #000;*/
            margin: 150px auto;//上下150px居中
            /*视觉距离*/
            perspective: 200000px;
        }
        .box{
            width: 300px;
            height: 300px;
            /*控制子元素3D转换*/
            transform-style: preserve-3d;
            /*测试代码，将盒子旋转*/
            /*transform: rotateX(45deg)rotateY(45deg);*/
            animation: ro 4s linear infinite;
             /*animation整体调用：动画名称ro 4s转完360度，匀速linear,一直转infinite*/

        }
        @keyframes ro {
            0%{
                transform: rotateX(0deg)rotateY（0deg);

            }
            100%{
                transform: rotateX(360deg)rotateY(360deg);

            }
        }/*让魔方整体转动起来*/
        .box-page{
            width: 300px;
            height: 300px;
            /*位置初始化*/
            position:absolute;
            transform-style: preserve-3d;
        }
        .top{
            /**/
            transform: translateZ(150px);
        }
        .bottom{
            /**/
            transform: translateZ(-150px)rotateX(180deg);

        }
        .left{
            /**/
            transform: translateX(-150px)rotateY(-90deg);
        }
        .right{
            /**/
            transform: translateX(150px)rotateY(90deg);//沿着x轴移动150px，再沿着Y轴旋转90度

        }
        .before{
            /**/
            transform: translateY(150px)rotateX(-90deg);
        }
        .after{
            /**/
            transform: translateY(-150px)rotateX(90deg);
        }
        .box-page div:nth-child(1){
            animation: a1 4.5s ease-in;
        }
        /*让每一个box-page每面的第一块飞出去的效果*/
        /*让每一面有3D效果就得让父元素box-page保持3D转换，transform-style:preserve-3d*/
        .box-page div:nth-child(2){
            animation: a1 4.5s ease-in 0.5s;

        }
        .box-page div:nth-child(3){
            animation: a1 4.5s ease-in 1s;
            
        }
        .box-page div:nth-child(4){
            animation: a1 4.5s ease-in 1.5s;
            
        }
        .box-page div:nth-child(5){
            animation: a1 4.5s ese-in 2s;
            
        }
        .box-page div:nth-child(6){
            animation: a1 4.5s ease-in 2.5s;
            
        }
.box-page div:nth-child(7){
animation: a1 4.5s ease-in 3s;

    }
.box-page div:nth-child(8){
animation: a1 4.5s ease-in 3.5s;

    }
.box-page div:nth-child(9){
animation: a1 4.5s ease-in 4s;

    }
@keyframes a1{
0%{
transform: translateZ(0px) scale(1)rotateZ(0deg);

    }
20%{

transform: translateZ(300px) scale(0)rotateZ(720deg);

    }
90%{
transform: translateZ(300px) scale(0)rotateZ(720deg);
    }
100%{
transform: translateZ(0px) scale(1)rotateZ(0deg);


    }
    }
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<div class="box">
<div class="box-page top"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>

</div>

</div>
<script type="text/javascript">
var arr=document.querySelectorAll(".box-page")//document选择器查找，找所有的box-page
// 遍历六个面中的每一个面for循环
for(var n=0;n<arr.length;n++){
arr[n];
//外层循环行
for(var r=0;r<3;r++){
//内层循环遍历列
for(var c=0;c<3;c++){
//创建元素
var divs=document.createElement("div");//创建元素
divs.style.cssText="width:100px; height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image: url(img/a"+n+".jpg);background-size:300px 300px;";//创建元素以后追加样式，让每个元素位置都做一个初始化
//background-image让图片都显示在左上角的小格里
arr[n].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";//
divs.style.backgroundPositionX= -c*100+"px";
divs.style.backgroundPositionY= -r*100+"px";//让每张图片在对应的小格里


    }
    }
    }
</script>

</body>
</html>

元素

JS用法

JS

JS基本语法

JS组成

JS特点

JS基本语法

JS使用方法

1.将JS代码嵌入在元素“事件”中：

2.将JS代码嵌入在<script>标记中

3.将JS代码写在外部脚本文件中（**.js）

4.语法规范

4.1 语句

4.2 注释

4.3 js在html中引用

JS变量

1. 什么是变量

2.变量的声明

2.1语法

3.数据类型

3.1 数据类型

3.2.隐式转换

3.3强制转换

4.运算符与表达式

4.1什么是运算符与表达式

4.2运算符

4.3 关系运算符

4.4 逻辑运算符

JS函数

5.1 什么是函数

5.2变量的作用域

JS 分支结构

1. if -else

2. switch case

JS数组

1 索引数组

数组：

2 关联数组

3 对比索引数组和关联数组

JS数组API

1 数组转换字符串

2 拼接和选取

3 DOM

DOM查找

DOM修改

4 DOM添加

5 BOM