2.3.3 定时器

setTimeout
setInterval
clearInterval
clearTimeout

2.3.3.1 setTimeout() 定时器

window.setTimeout(调用函数 [,延迟的毫秒数]);
// 该定时器在定时器到期后执行调用函数
注意：
1-window 可以省略
2-这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名（）’ 三种形式
3-延迟的毫秒数省略默认为 0，如果写必须是毫秒
4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

2.3.3.2 停止 setTimeout() 定时器

window.clearTimeout(timeoutID)
// 取消了先前通过调用 setTimeout() 建立的定时器
注意：
1-window 可以省略
2-里面的参数就是定时器的标识符

<script>
    setTimeout(function() {
        console.log('时间到了');
    }, 2000);
    function callback() {
        console.log('爆炸了');
    }
    var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
    // setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>

2.3.3.3 setInterval() 定时器

window.setInterval(回调函数 [,间隔毫秒数]);
// 重复调用一个函数，每个这个时间，就去调用一次回调函数
注意：
1-window 可以省略
2-这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）’三种形式
3-.间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4-因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
5-第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

2.3.3.4 停止 setInterval() 定时器

window.clearInterval(intervalID)
// 取消了先前调用 setInterval() 建立的定时器
注意:
1-window 可以省略
2-里面的参数就是定时器标识符

案例：发送短信验证按钮60秒等待效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 手机号码： <input type="number"> <button>发送</button>
 <script>
     // 按钮点击之后，会禁用 disabled 为true 
     // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
     // 里面秒数是有变化的，因此需要用到定时器
     // 定义一个变量，在定时器里面，不断递减
     // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
     var btn = document.querySelector('button');
     var time = 3; // 定义剩下的秒数
     btn.addEventListener('click', function() {
         btn.disabled = true;
         var timer = setInterval(function() {
             if (time == 0) {
                 // 清除定时器和复原按钮
                 clearInterval(timer);
                 btn.disabled = false;
                 btn.innerHTML = '发送';
             } else {
                 btn.innerHTML = '还剩下' + time + '秒';
                 time--;
             }
         }, 1000);
     })
 </script>
</body>
</html>

2.4 location

window 对象给我们提供了一个 location 属性用于获取或设置窗体 URL，并且可以用于解析 URL因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象

2.4.1 location 对象属性及方法

location对象属性和方法	返回值
location.href	获取或者设置整个 URL
location.reload()	重新加载当前页面，相当于刷新，如果参数为 true，强制刷新

2.4.2 案例

<div>5秒后会自动跳转页面</div>
<script>
    var time = 5;
    var div = document.querySelector('div');
    setInterval(function() {
        if (time == 0) {
            location.href = '#';
        } else {
            div.innerText = time + '秒后会自动跳转页面'
            time--;
        }
    }, 1000)
</script>

2.5 history

与浏览器的历史记录进行交互，该对象包含用户访问过的 URL

history对象方法	作用
back()	可以后退
forward()	前进功能
go(n)	前进后退功能，参数如果是1，前进1个页面，如果是-1，后退一个页面

案例说明：模拟导航前进与后退

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>这是网站的首页</h1>
    <ul>
      <li><a href="history_1.html">1</a></li>
      <li><a href="history_2.html">2</a></li>
      <li><a href="history_3.html">3</a></li>
    </ul>
    <button onclick="aa()">前进</button>
    <button onclick="bb()">后退</button>
    <script type="text/javascript">
      // 历史记录 history
      // go(数字)  back()  forward();
      function aa(){
        window.history.forward();
      }
      function bb(){
        window.history.back();
        window.history.go(-1);
      }
    </script>
  </body>
</html>

三、内置对象

内置对象是 JS 内部已经做好的对象，方便用户调用

3.1 Math数学对象

console.log(Math.PI);
console.log(Math.max(1,2,3,45));  // 取多个值中的最大数
Math.min(1,2,3);  //取多个值中最小的数
Math.floor(3.4);  // 向下取整 3
Math.ceil(3.4);  // 向上取整 4
Math.round(1.1);  // 四舍五入
Math.abs(-3);  // 取绝对值 3
Math.pow(10,2)  // 10的2次方
Math.sqrt(100)  // 开平方
Math.random();  // 生成0~1之间的随机小数 [0，1) === 左闭右开区间

// 生成一个区间的随机整数
function getRandom(min, max){
    return Math.floor(Math.floor(Math.random() * (max - min +1)) + min;
}
// 原理：
0 ~ 100
Math.random() * 100  // 乘100提升范围
100~200
Math.random() * 100 + 100  // 加100提升基数
0~200
Math.random() * (300-100)
100~300
Math.random() * (300-100) + 100

3.2 Date 日期对象

Date 是一个构造函数，需要使用 new 来创建对象

var date = new Date();
console.log(date);  // Wed Apr 21 2021 19:34:46 GMT+0800
date.getFullYear();  // 返回当前年份
date.getMonth();  // 返回的月份小1月
date.getDate();  // 返回几号
date.getDay();  // 返回周几，周一是1，周日是0
date.getHours(); // 返回小时
date.getMinutes(); //返回分钟
date.getSeconds(); //返回秒
// 获得总毫秒数从1970年1月1日（时间戳）
date.valueOf();
date.getTime();  
// H5 浏览器可以直接用 date 中的方法获取时间戳
var now = Date.now()
// 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳
var now = +new Date()

获得指定日期对象

var date = new Date(1619005441955);  // 传入时间戳
var date = new Date(2015, 4, 1);  // 传入年、月、日（月份从0开始计数）
var date = new Date("2020-5-10");  // 字符串方式传入年-月-日

转换成字符串

toString()

例：将时间对象整理为 "2020-04-15 11:47:30"的格式

// 2020-04-21 20:01:01
      function time() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth();
        var date = now.getDate();
        var hour = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();
        // 利用三元运算符
        month = month < 10 ? "0" + month : month;
        date = date < 10 ? "0" + date : date;
        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        return (
          "" +
          year +
          "-" +
          month +
          "-" +
          date +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec
        );
      }
      console.log(time());

3.3 字符串对象

包装对象

字符串、数字、布尔值这三种原始类型的值，为什么会有对象调用方法？这是因为 JS 引擎会自动将原始类型的值转换为包装对象，使用之后会立即销毁。

String 对象
Number 对象
Boolen 对象

str = '123';
// 内部处理
var temp = new String('123');  // 实际上是将字符串对象化
str = temp;  // 然后将临时变量传递给str
temp = null;  // 销毁临时变量
str.length();  // 这时候 str 已经是对象了，可以调用方法

字符串不可变

str = '1';
str = '2';

看似 str 变量从1变成了2，其实并不是 str 的变量改变，而是系统在内存中又开辟了一个空间存放数值2，然后将 str 的地址引向数据，但是原数据1还是存放在内存当中的。

indexOf(), lastIndexOf() 查找字符位置

和数组类似，可以将字符串也看做数组，第一个字符索引为0。

返回值：

查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1。

// str.indexOf('要查找的字符', [起始的位置])
var str = '白日依山尽';
console.log(str.indexOf('山'));
console.log(str.lastIndexOf('山'));

例：求某个字符出现的次数和位置

var str = "adfajiwerasdfjklweasdfawer";
var index = str.indexOf("a");
var num = 0;
while (index != -1) {
    console.log(index);
    num++;
    index = str.indexOf("a", index + 1);
}
console.log(num);

charAt() 按索引返回字符串

var str = 'andy';
str.charAt(3);  // 返回index位置的字符
str.charCodeAt(3);  // 返回 index 位置的 ASCII 码
str[3];  // 获取指定位置处字符

例：遍历字符串中字符

var str = "andy";
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

例：统计字符串中出现次数最多的字符

var str = "tqwerasdfwerqiuyasdfggyweasdf";
var o = {};
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // 通过 charAt() 获取字符串每个字符
    if (o[chars]) {
        // 判断如果没有该字符属性，则初始化1，有则+1
        o[chars]++;
    } else {
        o[chars] = 1;
    }
}
var max = 0;
var max_str = "";
for (var k in o) {
    // k 是键名
    // o[k] 是值
    if (o[k] > max) {
        max = o[k];
        max_str = k;
    }
}
console.log(max_str);
console.log(max);
// 输出结果
w

concat() 拼接字符串

将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = str1.concat(str2, str3);
console.log(str4);
// 输出结果
abc

substr() 按长度截取字符串

语法：

substr(start, length);  // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾

var anyString = "Mozilla";
console.log(anyString.substr(1,4));
// 输出结果
ozil

slice() 截取字符串

语法：

slice(start, end);  // 从 start 位置开始，截取到 end 位置（不包括end）。不输入 end 默认截取到结尾

var anyString = "Mozilla";
console.log(anyString.slice(1, 4));
// 输出结果
ozi

如果是负数索引，从 -1 开始计数

substring() 截取字符串

substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。slice() 用法与 substring() 用法类似，

slice() 方法也可以使用在数组中，并且支持负数索引
substring() 只可以在字符串中使用，不支持负数索引
如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

语法：

str.substring(indexStart[, indexEnd])

var anyString = "Mozilla";
console.log(anyString.substring(-2,3));
// 输出结果
Moz

replace() 替换字符串

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

语法：

stringObject.replace(regexp/substr,replacement)

字符串替换只替换第一个匹配项目
批量替换需要使用正则

例：

var anyString = "Hello World";
console.log(anyString.replace("World", "Javascript"));
// 输出
Hello Javascript

toUpperCase(), toLowerCase() 大小写转换

console.log("aBc".toUpperCase());
console.log("Abc".toLowerCase());
// 输出结果
ABC
abc

DOM基本编程

四、DOM基本介绍

1.1 什么是DOM？

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2 DOM树（家族谱）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型被结构化为对象树：

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

文档：一个页面就是一个文档，DOM中使用 document 表示

网页----框架标记（frameset iframe）–1个页面中包含了多个文档document对象

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

注意事项：DOM把以上内容都看做是对象

JavaScript函数和BOM及DOM编程（详细总结-无尿点）（二）

2.3.3 定时器

2.3.3.1 setTimeout() 定时器

2.3.3.2 停止 setTimeout() 定时器

2.3.3.3 setInterval() 定时器

2.3.3.4 停止 setInterval() 定时器

2.4 location

2.4.1 location 对象属性及方法

2.4.2 案例

2.5 history

三、内置对象

3.1 Math数学对象

3.2 Date 日期对象

3.3 字符串对象

indexOf(), lastIndexOf() 查找字符位置

charAt() 按索引返回字符串

concat() 拼接字符串

substr() 按长度截取字符串

slice() 截取字符串

substring() 截取字符串

replace() 替换字符串

toUpperCase(), toLowerCase() 大小写转换

DOM基本编程

四、DOM基本介绍

1.1 什么是DOM？

1.2 DOM树（家族谱）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript函数和BOM及DOM编程（详细总结-无尿点）（二）

2.3.3 定时器

2.3.3.1 setTimeout() 定时器

2.3.3.2 停止 setTimeout() 定时器

2.3.3.3 setInterval() 定时器

2.3.3.4 停止 setInterval() 定时器

2.4 location

2.4.1 location 对象属性及方法

2.4.2 案例

2.5 history

三、内置对象

3.1 Math数学对象

3.2 Date 日期对象

3.3 字符串对象

indexOf(), lastIndexOf() 查找字符位置

charAt() 按索引返回字符串

concat() 拼接字符串

substr() 按长度截取字符串

slice() 截取字符串

substring() 截取字符串

replace() 替换字符串

toUpperCase(), toLowerCase() 大小写转换

DOM基本编程

四、DOM基本介绍

1.1 什么是DOM？

1.2 DOM树（家族谱）

热门文章

最新文章

相关课程

相关电子书

相关实验场景