javascript了解&掌握

1. JS介绍

3. 1 js概念

是一门客户端的脚本话语言，依赖于html存在，运行在客户端的浏览器中，依靠浏览器的js解释引擎运行，不需要编译。

3.2 js功能

增强用户和html之间的交互，可以控制html标签，让页面产生动态效果

3.3 页面的类别

3.1 静态页面
无论谁，无论什么时候，用什么设备去访问一个页面，里面的数据不会产生变化

3.2 动态页面
上面三个可变因素，随便变一个，都会引起页面数据的改变，页面架构不会改变，是里面的数据会发生改变

2. js使用

2.1 外部js

另写一个js文件，里面做相应的js动态操作，然后再html文件中，通过script、src标签去引用

注意：script标签，可以出现在html中的任意位置，按顺序执行

2.2 内部js

就是直接在html文件中，通过script标签，在script标签里面写具体的js语句

注意：script标签，可以出现在html中的任意位置，按顺序执行

3. js基本语法

3.1 变量

1. 变量的定义：
   js在变量的定义时候，是不需要知道其类型的，具体的类型是由赋值使用的时候根据所传的值的类型来确定的

2. 变量类型
   number：相当于包含了Java中的int、double、float等
   string：字符串
   boolean：布尔类型
   object：对象（null也算object类型的）
   undefined：未定义、未赋值、什么也没有的变量

3. 定义变量关键字
   var：
   可重复声明的变量，所定义的变量是全局变量
   let：
   不可重复声明的变量，所定义的变量是局部变量
   const：常量

案例分析：

3.2 运算

1. 数学运算
   + - * / % ++ -- += -=
   
   注意：运算法则和Java类型，区别在于遍历都是number类型，所以在进行除法的时候，不会像Java一样取整，答案就是真正的算术运算计算出来的结果

2. 逻辑运算
   2.1普通的逻辑运算
   

注意：> < <= >= == != (只判断值不判断类型) === 全等于(即判断值也判断类型) !==（不全等） !

2.2 js中 做判断的时候按照假false来处理

2.3 && || 的判断

3.3 流程控制

js中的流程控制和Java中的基本一样

1. if–else
   
2. 循环
   
   案例：
   

2.4 函数/方法

1. 方法的定义与调用
   
2. 动态参数
   
   arguments 对象介绍：
   

2.5 对象

1. 第一种方式
   通过方法来创建，就类似于定义构造器，使用构造器来创建对象
   
2. 第二种方式
   
3. 第三种方式
   在创建对象的时候，直接定义属性，然后通过冒号去给属性初始化，属性和方法之间用逗号连接，最后再用对象去调用方法
   

4 dom

4.1 dom基本语法

概念：
全称：document object model 文档对象模型名主要就是将一个完整的html当做一个文档来处理，一个文档内部由很多标签来组成的，dom主要就是针对这些标签来实现增删改查

案例分析：

1. 在body中添加一个标签（h1为例）

 //在内存中创建一个标签（h1为例）
    // 1.要创建一个标签，那就得现有这个标签:creatElement创建元素
    let h1 = document.createElement("h1");
    // 2.然后将这个标签给放在body中去：append方法
    document.body.append(h1)
1
2
3
4
5

注意：这样标签的添加，标签只能够加在body中最末尾的位置

1. 指定位置添加标签：

• 将所要添加的标签加在指定的标签位置，可以直接在所要添加标签的前（后）添加即可

<p>表示一个段落1</p>
<script>
      let h1 = document.createElement("h1");
    // 2.然后将这个标签给放在body中去：append方法
    document.body.append(h1)
</script>
<p>表示一个段落2</p>
1
2
3
4
5
6
7

• 通过外部js完成，添加语句写在外部的js中

//html文件
<p>表示一个段落1</p>
<script src="../jsTest.js"></script>
<p>表示一个段落2</p>

//js文件
let h1 = document.createElement("h1");
// 2.然后将这个标签给放在body中去：append方法
document.body.append(h1)
1
2
3
4
5
6
7
8
9

输出：

2. 修改标签内容

    h1.innerText = "小王"//innerText主要是纯文本的修改，如果想要有html的样式，就不行
    h1.innerHTML = "小王"//innerHtml不仅会将文本给修改成功，还阔以将html样式给体现出来
1
2

输出：

注意：innerTexrt方法修改的都是纯文本的，不会有html样式；innerHtml方法修改的可以带html的样式文本

3. 修改样式
   语法：标签.style.要修改样式

//3.修改样式
    //修改样式的格式语法： 标签.style.要修改样式
    h1.style.color = "red";//修改h1的颜色
    h1.style.background = "black";//给h1加背景色
1
2
3
4

输出：

4. 修改、设置属性
   语法格式：
   1：标签.具体属性
   2: 标签.setAttribute（要修改的属性，修改的值）

 //4. 修改属性
    //语法格式：1：标签.具体属性  2:标签.setAttribute（要修改的属性，修改的值）
    h1.id = "aa"
    h1.title = "h1标签"
    h1.setAttribute("class","bb")
1
2
3
4
5

结果：

5. 获得属性值
   语法格式：标签.getAttribute（“所要获得的属性名”）

 //5.获得属性值
    //语法格式：标签.getAttribute（"所要获得的属性名"）
    console.log("h1的class属性值"+h1.getAttribute("class"))
    console.log("h1的id属性值"+h1.getAttribute("id"))
1
2
3
4

输出：

6. 删除标签

 //6.删除标签
     document.body.remove()//删除整个body
     document.body.removeChild(h1)//删除body的孩子h1标签,里面传的是一个属性对象
    
1
2
3
4

注意：使用removeChild（标签名）的时候，里面的标签，一定要是一个标签对象，要是是单独的标签名是不得行的，需要获取到标签对象才ok

7. 查询标签内容

 //7.查询标签
    //查询所有标签
    console.log( document.all)
    //通过标签名查找,getElementsByClassName(获得都是数组)
    var pbiao = document.getElementsByTagName("p");
    //通过类名去查找，getElementsByClassName（获得的是个数组）
    var aclass = document.getElementsByClassName("a");
    //通过id名查找,getElementById获得的值只有一个，因为id是唯一的
    var aid = document.getElementById("a");
    //循环遍历查询结果为数组的
    for (let i = 0; i <pbiao.length ; i++) {
        console.log(pbiao[i])//输出所有p标签内容，包含html格式
        console.log(pbiao[i].innerText)//输出所有p标签内容，纯文本的
    }
/*  不介意用forin来遍历，因为数组会有默认的值，forin会将其一起输出
    for (let index in pbiao) {
        console.log(pbiao[index])
    }*/

    //使用选择器，查询对应标签的第一个值
    console.log(document.querySelector("p"))
    //使用选择器，查询某个标签的所有值
    var elementNodeListOf = document.querySelectorAll("div p");
    for (let i = 0; i <elementNodeListOf.length ; i++) {
        console.log(elementNodeListOf[i].innerText)
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注意：在查询某个标签的内容时，不介意用forin来遍历，因为数组会有默认的值，forin会将其一起输出

4.2 模拟开关灯

题目解释：

代码案例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯title>
    <style>
        div{
            width: 375px;
            height: 729px;
            background-image: url("light.jpg");
        }
    style>
head>

<body>

<input type="button" value="关灯">

<div>div>
<script>
    //获得图片对象
    var divElement = document.querySelector("div");
    //写一个方法来让图片移动
    function changeLight(obj){
        if (obj.value == "关灯") {
            divElement.style.backgroundPositionX = "-375px"
            obj.value = "开灯";
        }else {
            divElement.style.backgroundPositionX = "0px"
            obj.value = "关灯"
        }
    }

    //添加按钮的点击事件
    //先获得的按钮对象
    var htmlInputElement = document.querySelector("input");
    //设置点击事件
    htmlInputElement.addEventListener("click",function (){
        changeLight(this)
    })

script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4.3 模拟购物车

题目：模拟一个购物车的样式，可以删除、添加商品，相应的改变对应价格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车title>
    <style>
        table{
            border-bottom: 1px solid black;
            width: 1500px;
            padding: 8px;
            align-content: center;
        }
    style>
head>
<body>


<table>
    <tr>
        <td>产品编号td>
        <td>产品名字         td>
        <td>            产品数量         td>
        <td>          单价td>
        <td>               总价td>
        <td>   td>
    tr>

table>
<div id = "goods">

div>
<div id = "cart">div>
<script>

    //商品数据
    let goodses = [
        {gid:1,gname:"苹果手机",price:3000,count:5,totalCount:0},
        {gid:2,gname:"vivo手机",price:4000,count:0,totalCount:0},
        {gid:3,gname:"oppo手机",price:5000,count:0,totalCount:0},
        {gid:4,gname:"华为手机",price:6000,count:0,totalCount:0},
        {gid:5,gname:"锤子手机",price:7000,count:0,totalCount:0},
        {gid:6,gname:"小米手机",price:8000,count:0,totalCount:0},
    ];

    //渲染商品数据
    function showGoods(){
        //计算所有的总价
        var allPrice =0;
        //用一个div来存所有的商品信息
        var goodsDiv = document.querySelector("#goods");
        //渲染之前先清空里面数据
        goodsDiv.innerText = "";
        //遍历goods数据，存入div中去渲染
        goodses.forEach(g=>{
            //每一个商品信息又是一个小的div，将其存入到最大的div中
            var goodDiv = document.createElement("table");
            //将这个div存入外面大的div中去
            goodsDiv.appendChild(goodDiv);
            //将其放在一行
            var goodTr = document.createElement("tr");
            goodDiv.appendChild(goodTr)
            //商品id,用span去存，这样也不用换行
            var gid = document.createElement("td");
            goodTr.appendChild(gid);//将编号放进小div去
            gid.innerHTML = g.gid+"  ";//用空格来条格式
            //商品名字
            var gname = document.createElement("td");
            goodTr.appendChild(gname);
            gname.innerHTML = "                                        "+g.gname;

            //产品数数量前的减号
            var subCount = document.createElement("input");
            subCount.type = "button";
            subCount.value = "-";
            //给减号按钮添加事件
            subCount.onclick = function (){
                if (g.count>=1){//如果商品数量大于1，就可以减少
                    g.count--;
                }
                showGoods()
            }
            goodTr.appendChild(subCount);
            //产品数量
            var count = document.createElement("input");
            count.type = "text";
            count.value = g.count;
            goodTr.appendChild(count);
            //产品后面的加号
            var addCount = document.createElement("input");
            addCount.type = "button";
            addCount.value = "+";
            //给加号添加点击事件
            addCount.onclick = function (){
                g.count++
                showGoods()
            }
            goodTr.appendChild(addCount)

            //商品单价
            var price = document.createElement("td");
            goodTr.appendChild(price)
            price.innerHTML="$"+g.price+"                                                   ";

            //商品总价
            var totalCount = document.createElement("td");
            goodTr.appendChild(totalCount)
            totalCount.innerHTML = (g.price*g.count)+"   ";
            allPrice += g.price*g.count;

            //移除按钮
            var remove = document.createElement("input");
            goodTr.appendChild(remove)
            remove.type = "button";
            remove.value = "移除";

            //给移除添加点击事件
            remove.onclick = function (){
                document.removeChild()
                showGoods()
            }

        })
        var lastTr = document.createElement("tr");
        goodsDiv.appendChild(lastTr)
        var Allprice = document.createElement("td");
        lastTr.appendChild(Allprice)
        Allprice.innerHTML = "总价格："+allPrice;
        var clearCarts = document.createElement("input");
        lastTr.appendChild(clearCarts)
        clearCarts.type = "button";
        clearCarts.value = "清除购物车";
        clearCarts.onclick = function (){
            goodses.forEach( g =>{
                g.count=0;
                g.totalCount=0
            })
            showGoods();
        }
    }
    showGoods();
script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

输出：
前端不爱调试设计了，后端功能能行就ok

4.4 模拟球球大作战

题目：用js实现一个球球游戏，也就是，当球遇到障碍物的时候，障碍物会消失，并且会相应的加一分，要是没有接到球就会结束游戏

案例分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>球球游戏</title>
    <style>
        body {
            margin: 0px;
            width: 1920px;
            height: 800px;
        }

        #ball {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            position: absolute;
            margin-top: 30px;
        }

        #board {
            width: 200px;
            height: 20px;
            background-color: #371cff;
            position: absolute;
        }

        #score {
            width: 150px;
            height: 20px;
            margin-top: 0px;
            background-color: skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="ball"></div>
<div id="board"></div>
<div id="score">得分：</div>

<script>
    let directH = "right"; // 水平方向
    let directV = "bottom"; // 垂直方向
    let speed = 2;
    let boardSpeed = 20;
    var sum = 0;

    window.onload = function () {
        creatTree()
        // 改变下面板子的位置
        var board = document.querySelector("#board");
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        board.style.top = (h - 20) + "px";
        board.style.left = "0px";
        document.onkeydown = function () {
            let which = event.keyCode || event.which;
            let left = board.style.left == "" ? 0 : parseInt(board.style.left);
            if (which == 37) {
                if (left - boardSpeed > 0)
                    board.style.left = (left - boardSpeed) + "px";
            } else if (which == 39) {
                if (left + boardSpeed + 200 < w)
                    board.style.left = (left + boardSpeed) + "px";
            }
        }
        intervalId = setInterval(move, 10);

    }

    //障碍物创建
    //这里也可以用随机数来产生障碍物
    function creatTree() {
        for (let i = 0; i < 10; i++) {
            var treeDiv = document.createElement("div");
            treeDiv.className = "tree"
            treeDiv.style.position = "absolute"
            treeDiv.style.backgroundColor = "red"
            treeDiv.style.width = "50px";
            treeDiv.style.height = "50px";
            let left = 50;
            let right = i * 200;
            treeDiv.style.marginTop = left + "px";
            treeDiv.style.marginLeft = right + "px";
            document.body.appendChild(treeDiv)
        }
    }


    //球球移动方法
    function move() {
        let left = ball.style.left == "" ? 0 : parseInt(ball.style.left);
        let top = ball.style.top == "" ? 0 : parseInt(ball.style.top);
        if (directH == "left") {
            left -= speed;
        } else {
            left += speed;
        }

        if (directV == "top") {
            top -= speed;
        } else {
            top += speed;
        }
        ball.style.left = left + "px";
        ball.style.top = top + "px";

        var w = document.documentElement.clientWidth || document.body.clientWidth;
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        if (directH == "left" && left <= 0) {
            directH = "right";
        }
        if (directH == "right" && left + 100 >= w) {
            directH = "left";
        }

        if (directV == "top" && top <= 0) {
            directV = "bottom";
        }
        //反弹 改变方向
        var board = document.querySelector("#board");
        let boardLeft = board.style.left == "" ? 0 : parseInt(board.style.left);
        if (left + 50 >= boardLeft && left + 50 <= boardLeft + 200) {
            if (directV == "bottom" && top + 100 >= h - 40) {
                directV = "top";
            }
        } else if (Math.pow((boardLeft - left - 50), 2) + Math.pow((h - 20 - top - 50), 2) <= 2500) { // 碰到左边的点
            directH = "left";
            directV = "top";
        } else if (Math.pow((boardLeft + 200 - left - 50), 2) + Math.pow((h - 20 - top - 50), 2) <= 2500) { // 碰到左边的点
            directH = "right";
            directV = "top";
        } else if (directV == "bottom" && top + 100 >= h) {
            alert("game over!!!");
            clearInterval(intervalId);
        }
        //碰到障碍物的操作
        var trees = document.querySelectorAll(".tree");
        var score = document.querySelector("#score");

        for (let i = 0; i < trees.length; i++) {
            let treeTop = parseInt(trees[i].style.marginTop) + 25;
            let treeLeft = parseInt(trees[i].style.marginLeft) + 25;
            let ballTop = parseInt(ball.style.top) + 50;
            let ballLeft = parseInt(ball.style.left) + 50;
            //每一个矩形和园的最远距离
            let distanceMax = Math.sqrt(800) + 50;
            //实际矩形和圆心的距离
            let distanceZhen = Math.sqrt(Math.pow((ballTop - treeTop), 2) + Math.pow((ballLeft - treeLeft), 2));
            if (distanceZhen <= distanceMax) {//意味着挨着了  就消失
                if ((ballLeft < treeLeft) || ballLeft > treeLeft) {
                    if (directH == "right") {
                        directH = "left";
                    } else if (directH == "left") {
                        directH = "right";
                    }
                    sum++;
                    console.log(sum)
                    score.innerHTML = "得分：" + sum;
                    trees[i].remove();
                } else if ((ballTop > treeTop) || (ballTop < treeTop)) {
                    if (directV == "top") {
                        directV = "button";
                    } else if (directV == "button") {
                        directV = "top";
                    }
                    sum++;
                    console.log(sum)
                    score.innerHTML = "得分：" + sum;
                    trees[i].remove();
                }
            }
        }
    }

</script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

注意：这里最需要注意的就是球和障碍物相撞的判断，我利用的是球心和障碍物中心两者之间的距离来判断的，最远的相撞点肯定就是障碍物角和球相撞的时候，所以只要两者中心之间的距离小于等于这个最大距离就代表碰到了，就会消失

4.5 贪吃蛇

用js实现一个贪吃蛇游戏，
要求：

1. 不能撞墙
2. 不能撞自己
3. 每吃一个食物就会加一分
4. 相撞后就结束游戏
   部分结果如下：
   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
</head>
<body>

<script>
    let snake = [];
    let direct = "left";
    var interval;//定时器
    var scroe = 0;//得分
    window.onload = function () {
        // 先创建一个游戏区域
        gameArea = createDiv(800, 800, 0, 0, "relative", "#e3e3e3", true, false);
        document.body.appendChild(gameArea);
        //创建蛇
        for (let i = 0; i < 3; i++) {
            var body = createDiv(20, 20, i * 20 + 200, 200, "absolute", "red", false, true);
            gameArea.appendChild(body);
            snake.push(body);
        }
        // 创建食物
        let x = parseInt(Math.random() * 40) * 20;
        let y = parseInt(Math.random() * 40) * 20;
        food = createDiv(20, 20, x, y, "absolute", "green", false, true);
        gameArea.appendChild(food);
        interval = setInterval(move, 300);

        //添加事件改变方向
        document.onkeyup = function () {
            let which = event.keyCode || event.which;
            if (which == 37) {
                if (direct != "right")
                    direct = "left"
            } else if (which == 39) {
                if (direct != "left")
                    direct = "right"
            } else if (which == 38) {
                if (direct != "bottom")
                    direct = "top"
            } else if (which == 40) {
                if (direct != "top")
                    direct = "bottom"
            }
        }
    }


    function move() {
        //创建积分块
        //注意：积分块要在定时器里面去添加，不然就只会被加载一次
        scroeDiv = createDiv(200, 22, 0, 0, "absolute", "pink", false, false);
        gameArea.appendChild(scroeDiv);
        scroeDiv.innerText = "得分：" + scroe;
       // console.log(scroe)
        //蛇的身体移动
        for (let i = snake.length - 1; i > 0; i--) {
            snake[i].style.left = snake[i - 1].style.left;
            snake[i].style.top = snake[i - 1].style.top;
        }
        //移动蛇头
        let x = parseInt(snake[0].style.left);
        let y = parseInt(snake[0].style.top);
        if (direct == "left") {
            snake[0].style.left = (x - 20) + "px";
        } else if (direct == "right") {
            snake[0].style.left = (x + 20) + "px";
        } else if (direct == "top") {
            snake[0].style.top = (y - 20) + "px";
        } else if (direct == "bottom") {
            snake[0].style.top = (y + 20) + "px";
        }
        //判断是否吃到了食物
        x = parseInt(snake[0].style.left);
        y = parseInt(snake[0].style.top);
        foodX = parseInt(food.style.left);
        foodY = parseInt(food.style.top);
        if (x == foodX && y == foodY) {//吃到了食物
            //蛇的身体+1
            var body = createDiv(20, 20, 200, 200, "absolute", "red", false, true);
            body.style.left = snake[snake.length - 1].style.left;
            body.style.top = snake[snake.length - 1].style.top;
            gameArea.appendChild(body);
            snake.push(body);
            //得一分
            scroe++;
            foodX = parseInt(Math.random() * 40) * 20;
            foodY = parseInt(Math.random() * 40) * 20;
            food.style.left = foodX + "px";
            food.style.top = foodY + "px";

        }
        //当蛇头碰到边界，就结束游戏
        if (parseInt(snake[0].style.left) <= -20 || parseInt(snake[0].style.left) >= 800
            || parseInt(snake[0].style.top) <= -20 || parseInt(snake[0].style.top) >= 800) {
            alert("game over! 得分："+scroe)
            clearInterval(interval)
        }
        //不能碰到自己
        //遍历一下自己的每一节身体，去判断与头有没有重合的
        for (let i = 1; i < snake.length; i++) {
            if (parseInt(snake[0].style.left) == parseInt(snake[i].style.left) && parseInt(snake[0].style.top) == parseInt(snake[i].style.top)) {
                alert("game over! 得分："+scroe)
                clearInterval(interval)
            }
        }
        //计分

    }

    function createDiv(width, height, x, y, position, bgColor, isCenter, isCircle) {
        var div = document.createElement("div");
        div.style.width = width + "px";
        div.style.height = height + "px";
        div.style.left = x + "px";
        div.style.top = y + "px";
        div.style.backgroundColor = bgColor;
        if (isCenter)
            div.style.margin = "0 auto";
        if (position)
            div.style.position = position;
        if (isCircle)
            div.style.borderRadius = "50%";
        return div;
    }

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

注意：积分块要在定时器里面去添加，这样就可以实现每一次加分，要是设置在window.onload方法里面的话，就只会被加载一次，里面的score得分是不会变化的

5 事件

5.1 事件介绍

1. HTML 事件是发生在 HTML 元素上的“事情”。

2. 当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

3. HTML 事件可以是浏览器或用户做的某些事情。

5.2 事件类型

5.3 HTML DOM 事件属性和方法

6 定时器

定时器概念：
在js中没有线程的概念，要想异步的执行任务就需要使用定时器，定时器在js中分为两种，一种循环定时器，一种延时定时器

6.1 循环定时器

1. 循环定时器就是在一定时间（毫秒为单位）内，执行一次任务，执行到不想执行了就结束

2. 语法： var intervalId = setInterval ( 要定时执行的任务函数 ，参数时间 )

3. 关键字：intervalId

案例：

intervalId = setInterval(move, 10);//每十毫秒执行一次move函数
1

  let i = 0;
    var intervalId = setInterval(function (){
        console.log(++i);
    },200)//每隔200毫秒执行一起function方法
1
2
3
4

6.2 延时定时器

1. 在指定的时间执行一次方法，只执行一次

2. 关键字：timeout

案例分析：

    var timeout = setInterval(function (){
        console.log(1);
    },200)//每隔200毫秒执行一起function方法
1
2
3

6.3 清除定时器

语法：clear对应的定时器类型（定时器id）

1. 清除循环定时器

clearInterval(intervalId)
1

2. 清除延时定时器

clearTimeout(timeout)
1

7 bom

broswer object model 浏览器对象模型，将浏览器中的每一个东西都看做是对象，dom也算是bom中的一部分

浏览器中常用的对象有：document，location，history，navigator，screen，window

7.1 location

当前打开页面的url信息都包含在其中

console.log(location.hash) // #后面的部分
console.log(location.host) //主机和端口
console.log(location.hostname) //主机
console.log(location.port) // 端口
console.log(location.search) // ?后面的部分
console.log(location.pathname)// 路径部分
console.log(location.protocol) // 协议
console.log(location.href) // 完整的url
//常用的一种页面跳转的方式
location.href = "https://www.baidu.com"

1
2
3
4
5
6
7
8
9
10
11

7.2 history

记录了当前标签页的历史记录

history.back(); // 回退
history.forward();// 前进
history.go(1);//当前页算为0 去第几个记录
history.length;// 当前标签页有几个历史记录
1
2
3
4

7.3 navigator

记录了浏览器和系统的相关信息

var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("
");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("
");
document.write("Name=" + x.appName);
document.write("
");
document.write("Version=" + x.appVersion);
document.write("
");
document.write("CookieEnabled=" + x.cookieEnabled);

document.write("
");
document.write("CPUClass=" + x.cpuClass);
document.write("
");
document.write("OnLine=" + x.onLine);
document.write("
");
document.write("Platform=" + x.platform);
document.write("
");
document.write("UA=" + x.userAgent);
document.write("
");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("
");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("
");
document.write("UserLanguage=" + x.userLanguage)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

7.4 screen

记录了屏幕相关的一些信息

document.write("Screen resolution: ")
document.write(screen.width + "*" + screen.height)
document.write("
")
document.write("Available view area: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("
")
document.write("Color depth: ")
document.write(screen.colorDepth)
document.write("
")
document.write("Buffer depth: ")
document.write(screen.bufferDepth)
document.write("
")
document.write("DeviceXDPI: ")
document.write(screen.deviceXDPI)
document.write("
")
document.write("DeviceYDPI: ")
document.write(screen.deviceYDPI)
document.write("
")
document.write("LogicalXDPI: ")
document.write(screen.logicalXDPI)
document.write("
")
document.write("LogicalYDPI: ")
document.write(screen.logicalYDPI)
document.write("
")
document.write("FontSmoothingEnabled: ")
document.write(screen.fontSmoothingEnabled)
document.write("
")
document.write("PixelDepth: ")
document.write(screen.pixelDepth)
document.write("
")
document.write("UpdateInterval: ")
document.write(screen.updateInterval)
document.write("
")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

7.5 window

代表了当前的窗口对象

innerheight 文档显示区域可见高度
innerwidth 文档显示区的宽度
opener 返回创建窗口的引用
parent 父窗口的引用
//self 等价于window
窗口左上角的坐标
screenLeft
screenTop
screenX
screenY
方法
alert(); 提示窗口
confirm("asdadsasd"); 确认窗口
prompt();输入窗口
open();打开一个窗口
//返回打开的页面的window对象
var open = window.open("https://www.baidu.com","_blank");
scrollBy() 设置滚动条滚动的像素值
scrollTo() 设置滚动条滚动到的像素值
parseInt("100a") 将字符串转换为数字 a100
parseFloat() 将字符串转换为小数
isNaN() 判断一个数字是否为非数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

8 常用类和常用方法

8.1 Array数组

var arr = [1,2,3,4,5];
var arr = new Array(5);
var arr = new Array(1,2,3,4,5);

arr.length 数组长度
arr.concat(); 拼接数组 连接两个或更多的数组，并返回拼接后的结果
arr.join(","); // 1,2,3,4,5  将所有的元素放入一个字符串中，可以指定分隔符 如果未指定默认是,
arr.pop(); 删除并返回数组的最后一个元素
arr.push(); 向末尾添加一个元素
arr.shift(); 删除并返回第一个元素
arr.unshift(); 向头部添加元素
arr.slice(start,end); 截取数组 包含前面不包含后面
arr.splice(start,len); 从指定位置开始删除指定的长度
arr.reverse();反转数组
arr.sort(); 排序
arr.sort(function (a,b){
    return a - b;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

8.2 String

字符串相关的操作

length 字符串长度
charAt();// 返回指定位置的字符
concat();//拼接字符串
indexOf();
lastIndexOf();
match() 判断字符串是否匹配正则表达式
replace() 替换
search() 检索符合正则的值
slice() 提取字符串的片段
split() 分割字符串
substr(start,length) 截取字符串
substring(start,end) 截取字符串
toLowerCase()转换成小写
toUpperCase() 转换成大写
1
2
3
4
5
6
7
8
9
10
11
12
13
14

8.3 Math

数学相关的方法

E 算数常量 约等于2.718
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。

abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

8.4 Date

跟时间相关的操作方法

var date = new Date();//代表的是当前时间 获取的是系统时间
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 2021/6/17上午11:26:11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

8.5 Reg正则表达式

修饰符

方括号

方括号用于查找某个范围内的字符：

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

量词

RegExp 对象属性