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

简介: JavaScript函数和BOM及DOM编程(详细总结-无尿点)(二)

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 等于 indexEndsubstring 返回一个空字符串。
  • 如果省略 indexEndsubstring 提取字符一直到字符串末尾。
  • 如果任一参数小于 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把以上内容都看做是对象

相关文章
|
12天前
|
JavaScript
js函数封装 —— 金额添加千分位分隔符
js函数封装 —— 金额添加千分位分隔符
12 2
|
8天前
|
JavaScript
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
js 延时执行代码的最佳实践 —— 自定义 sleep 函数
10 0
|
9天前
|
Web App开发 JavaScript iOS开发
js【详解】BOM
js【详解】BOM
10 0
|
9天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
9 0
|
10天前
|
JavaScript
js 高频实用函数封装汇总(持续更新)
js 高频实用函数封装汇总(持续更新)
10 0
|
10天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
8 0
|
11天前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
14 0
|
11天前
|
JavaScript
JS【详解】函数.bind()
JS【详解】函数.bind()
5 0
|
11天前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
12 0
|
11天前
|
存储 JavaScript 前端开发