【超全】JavaScript知识速查：基础语法与DOM操作

JavaScript知识速查

文章目录

  • JavaScript知识速查
    • @[toc]
    • JavaScript 简介
      • 在网页开发中的用途和意义：
      • 示例：
    • JavaScript 语法
      • JavaScript 变量定义
        • 变量命名规则：
        • 变量的类型：
        • 变量的作用域：
        • 示例代码：
      • JavaScript 数据类型
        • 数据类型
      • JavaScript 运算符
        • 运算符
      • JavaScript 语句与语法
        • 控制流语句
      • JavaScript函数
        • 函数
      • JavaScript数组
        • 数组
      • JavaScript对象
        • 对象
      • JavaScript DOM (Document Object Model)
    • JavaScript DOM (Document Object Model)
      • DOM结点操作
      • JavaScript 定时器

JavaScript 简介

JavaScript 是一种高级、解释型的编程语言，主要用于构建交互式的网站和应用。它是 Web 开发的三大核心技术之一，与 HTML 和 CSS 共同为开发者提供创建高效、动态、用户友好的网页和应用的能力。

在网页开发中的用途和意义：

  1. 交互性:

    • JavaScript 使网页具有交互性，允许用户与网页进行交互，例如点击按钮、提交表单、动画效果等。

  2. 动态内容:

    • 通过 JavaScript，开发者可以动态地修改 HTML 和 CSS，例如动态添加/删除元素、改变样式等。

  3. 表单验证:

    • JavaScript 可以在用户提交表单之前在客户端进行表单验证，提高用户体验和系统效率。

  4. 实时更新:

    • JavaScript 可以实现网页的实时更新，例如显示实时时间、动态加载新内容等，无需刷新页面。

  5. Ajax 通信:

    • JavaScript 支持 Ajax，允许开发者实现与服务器的异步通信，实时获取或发送数据。

  6. 客户端存储:

    • 通过 JavaScript，开发者可以在用户的浏览器上存储数据，例如使用 localStorage 和 sessionStorage。

  7. 动画效果:

    • JavaScript 可以创建动画效果，如轮播图、页面滑动效果、过渡效果等。

  8. 框架和库:

    • 存在大量 JavaScript 库（如 jQuery）和框架（如 Angular、React、Vue.js），使得开发更为高效和强大。

示例：

下面是一个简单的 JavaScript 例子，展示了如何通过点击按钮来改变文本内容：

HTML:

<!DOCTYPE html>
<html>
<head><title>JavaScript Example</title>
</head>
<body><p id="demo">Hello World!</p><button type="button" onclick="changeText()">Click me</button><script type="text/javascript">function changeText() {document.getElementById("demo").innerHTML = "Hello JavaScript!";}
</script></body>
</html>

在上述示例中：

  • 我们首先创建了一个段落和一个按钮。
  • 然后，我们编写了一个 JavaScript 函数 changeText，当用户点击按钮时，这个函数会被调用。
  • 函数 changeText 会找到 id 为 “demo” 的段落，并将其文本内容改为 “Hello JavaScript!”。

通过这个简单的例子，你可以看到 JavaScript 是如何使网页具有交互性的。用户点击按钮，网页的内容随之改变，而无需刷新页面。只有网页配上了JavaScript才能够称之为真正意义上的网页。现在，让我们开始JavaScript吧！

JavaScript 语法

JavaScript 变量定义

在 JavaScript 中，变量是用于存储数据值的容器。你可以使用变量来保存和操作数据。以下是JavaScript中变量定义的基本信息：

  1. var 关键字 (逐渐被淘汰)：

    • 在 ES6 之前，var 是定义变量的唯一关键字。
    • var 定义的变量具有函数作用域，如果在函数外部定义，则具有全局作用域。
    var x = 10;  // 定义一个名为 x 的变量，并赋值为 10

  2. let 关键字：

    • 从 ES6 开始，let 是定义变量的新关键字。
    • let 定义的变量具有块作用域，只在定义它的块（如 if 语句或循环）中有效。
    let y = 20;  // 定义一个名为 y 的变量，并赋值为 20

  3. const 关键字：

    • const 也是从 ES6 开始引入的，用于定义常量。
    • const 定义的变量也具有块作用域，但不能重新赋值。
    • const 必须在声明时初始化。
    const z = 30;  // 定义一个名为 z 的常量，并赋值为 30
变量命名规则：
  • 变量名必须以字母、美元符号（$）或下划线（_）开头。
  • 变量名可以包含字母、数字、美元符号（$）和下划线（_）。
  • 变量名是大小写敏感的。
变量的类型：

JavaScript 是一种动态类型语言，意味着不需要预先声明变量的类型。变量的类型将根据赋给它的值而自动更改。

let variable = "hello";  // string 类型
variable = 42;  // number 类型
变量的作用域：
  • 全局作用域：在代码的任何地方都可以访问的变量。
  • 函数作用域：只在函数内部可以访问的变量。
  • 块作用域：只在某个代码块（如 if 语句或循环）内部可以访问的变量。
示例代码：
// 使用 var 定义变量
var a = 10;// 使用 let 定义变量
let b = 20;// 使用 const 定义常量
const c = 30;// 动态类型
let variable = "string";  // string 类型
variable = 40;  // number 类型// 函数作用域
function testScope() {var insideFunction = "accessible inside function";
}// 块作用域
if (true) {let insideBlock = "accessible inside block";
}

JavaScript 数据类型

数据类型

JavaScript 中有几种基本的数据类型，包括：

  1. Number（数字）:
    • 用于表示整数和浮点数。
// 旧标准
var num1 = 42; // 整数
var num2 = 3.14; // 浮点数// 新标准 (ES6+)
let num3 = 42; // 整数
const num4 = 3.14; // 浮点数
  1. String（字符串）:
    • 用于表示文本。
// 旧标准
var str1 = 'Hello, world!';
var str2 = "Hello, world!";// 新标准 (ES6+)
let str3 = 'Hello, world!';
const str4 = "Hello, world!";
  1. Boolean（布尔值）:
    • 表示真或假。
// 旧标准
var bool1 = true;
var bool2 = false;// 新标准 (ES6+)
let bool3 = true;
const bool4 = false;
  1. Null（空值）:
    • 表示没有值或无值。
// 旧标准
var nothing = null;// 新标准 (ES6+)
let nothing2 = null;
  1. Undefined（未定义）:
    • 表示变量未被初始化。
// 旧标准
var und;
console.log(und); // undefined// 新标准 (ES6+)
let und2;
console.log(und2); // undefined
  1. Object（对象）:
    • 用于存储键值对集合。
// 旧标准
var obj1 = {name: 'John',age: 25
};// 新标准 (ES6+)
const obj2 = {name: 'John',age: 25
};
  1. Array（数组）:
    • 用于存储值的有序集合。
// 旧标准
var arr1 = [1, 2, 3, 4, 5];// 新标准 (ES6+)
const arr2 = [1, 2, 3, 4, 5];
  1. Symbol（符号） (ES6+):
    • 创建唯一的值，主要用于对象属性的键。
// 新标准 (ES6+)
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

以上就是 JavaScript 中的主要数据类型和它们的示例代码。在新标准 ES6+ 中，推荐使用 let 和 const 关键字来声明变量，而非旧标准中的 var。

JavaScript 运算符

运算符

JavaScript 中有多种运算符，它们可以进行不同类型的操作。下面列举了一些常见的运算符及其用法：

  1. 赋值运算符（Assignment Operators）:
    • 用于将值赋给变量。
let x = 10;
const y = 20;
  1. 算术运算符（Arithmetic Operators）:
    • 用于执行数学运算。
let a = 10 + 5; // 加法
let b = 10 - 5; // 减法
let c = 10 * 5; // 乘法
let d = 10 / 5; // 除法
let e = 10 % 3; // 模（余数）
let f = 10 ** 2; // 指数
  1. 比较运算符（Comparison Operators）:
    • 用于比较两个值。
console.log(10 == '10'); // 相等（非严格比较，仅比较值）
console.log(10 === '10'); // 全等（严格比较，比较值和类型）
console.log(10 != '10'); // 不相等（非严格比较）
console.log(10 !== '10'); // 不全等（严格比较）
console.log(10 > 5); // 大于
console.log(10 < 5); // 小于
console.log(10 >= 10); // 大于或等于
console.log(10 <= 10); // 小于或等于
  1. 逻辑运算符（Logical Operators）:
    • 用于基于一个或多个条件执行逻辑运算。
let g = true && false; // 逻辑与
let h = true || false; // 逻辑或
let i = !true; // 逻辑非
  1. 条件（三元）运算符（Conditional (Ternary) Operator）:
    • 根据条件返回一个值。
let j = (10 > 5) ? 'Yes' : 'No'; // 如果10大于5，则返回'Yes'，否则返回'No'
  1. 递增和递减运算符（Increment and Decrement Operators）:
    • 用于递增或递减变量的值。
let k = 10;
k++; // 递增
console.log(k); // 11let l = 10;
l--; // 递减
console.log(l); // 9
  1. 位运算符（Bitwise Operators）:
    • 用于执行二进制位运算。
let m = 5 & 3; // 位与
let n = 5 | 3; // 位或
let o = ~5; // 位非
let p = 5 ^ 3; // 位异或
let q = 5 << 1; // 左移
let r = 5 >> 1; // 右移
  1. 字符串运算符:
    • 用于连接字符串。
let s = 'Hello, ' + 'world!';
console.log(s); // 'Hello, world!'
  1. 类型运算符（Type Operators）:
    • 用于确定值的类型。
console.log(typeof 'Hello'); // string
console.log(typeof 10); // number

以上就是 JavaScript 中常见的一些运算符及其用法的示例。通过这些运算符，你可以执行各种不同类型的操作和计算。

JavaScript 语句与语法

控制流语句

控制流语句用于控制程序的执行流程，根据特定条件执行不同的代码块。以下是一些常见的控制流语句及其用法：

  1. If 语句（If Statement）:
    • 根据条件执行代码。
let age = 18;
if (age >= 18) {console.log('You are an adult.');
}
  1. Else 语句（Else Statement）:
    • 如果 if 语句的条件不成立时执行代码。
let age = 16;
if (age >= 18) {console.log('You are an adult.');
} else {console.log('You are a minor.');
}
  1. Else If 语句（Else If Statement）:
    • 如果 if 语句的条件不成立时，可以提供一个或多个额外的条件。
let age = 16;
if (age >= 18) {console.log('You are an adult.');
} else if (age >= 16) {console.log('You are almost an adult.');
} else {console.log('You are a minor.');
}
  1. Switch 语句（Switch Statement）:
    • 根据表达式的值，执行不同的代码块。
let fruit = 'apple';
switch (fruit) {case 'banana':console.log('You chose a banana.');break;case 'apple':console.log('You chose an apple.');break;default:console.log('You did not choose a banana or an apple.');
}
  1. For 循环（For Loop）:
    • 重复执行代码块，直到条件不再满足。
for (let i = 0; i < 5; i++) {console.log(i);
}
  1. While 循环（While Loop）:
    • 当条件为真时重复执行代码块。
let i = 0;
while (i < 5) {console.log(i);i++;
}
  1. Do While 循环（Do While Loop）:
    • 至少执行一次代码块，然后在条件为真时继续执行。
let i = 0;
do {console.log(i);i++;
} while (i < 5);
  1. Break 语句（Break Statement）:
    • 用于退出循环或 switch 语句。
for (let i = 0; i < 5; i++) {if (i === 3) {break;}console.log(i);
}
  1. Continue 语句（Continue Statement）:
    • 用于跳过循环的当前迭代，进入下一迭代。
for (let i = 0; i < 5; i++) {if (i === 3) {continue;}console.log(i);
}

以上是 JavaScript 中常见的控制流语句及其用法的示例。通过这些语句，你可以控制代码的执行流程，执行不同的操作和计算。

JavaScript函数

函数

函数是一种封装代码的方式，它允许你定义代码块并通过名称来调用它。函数可以有参数和返回值。

  1. 函数声明（Function Declaration）:
    • 使用 function 关键字来声明函数。
function greet(name) {console.log('Hello, ' + name + '!');
}greet('Alice');  // Output: Hello, Alice!
  1. 函数表达式（Function Expression）:
    • 把一个函数赋值给一个变量。
const greet = function(name) {console.log('Hello, ' + name + '!');
};greet('Bob');  // Output: Hello, Bob!
  1. 箭头函数（Arrow Function）:
    • 使用箭头符号 (=>) 的简洁语法来创建函数。
const greet = (name) => {console.log('Hello, ' + name + '!');
};greet('Charlie');  // Output: Hello, Charlie!
  1. 默认参数（Default Parameters）:
    • 为函数参数提供默认值。
function greet(name = 'User') {console.log('Hello, ' + name + '!');
}greet();  // Output: Hello, User!
  1. 剩余参数（Rest Parameters）:
    • 允许你将不确定数量的参数表示为一个数组。
function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}console.log(sum(1, 2, 3, 4));  // Output: 10
  1. 立即执行函数表达式（Immediately Invoked Function Expression, IIFE）:
    • 创建一个立即执行的函数。
(function() {console.log('This function runs immediately!');
})();
  1. 闭包（Closures）:
    • 闭包是有权访问其作用域链上层的函数，即使该函数在其上层作用域执行完毕后仍然能够访问上层作用域的变量。
function createCounter() {let count = 0;return function() {count++;console.log(count);};
}const counter = createCounter();
counter();  // Output: 1
counter();  // Output: 2
  1. 回调函数（Callback Functions）:
    • 函数可以作为参数传递给其他函数，并在那些函数内部被调用。
function doSomething(callback) {console.log('Doing something...');callback();
}doSomething(function() {console.log('Callback function executed!');
});
  1. 异步函数（Async Functions）:
    • 使用 async 关键字声明的函数，可以包含 await 表达式，以暂停和恢复函数的执行。
async function fetchData(url) {const response = await fetch(url);const data = await response.json();console.log(data);
}fetchData('https://api.example.com/data');

以上是 JavaScript 中与函数相关的一些基本和高级概念。通过理解和应用这些概念，你可以更有效地组织和管理代码，处理各种程序设计任务。

JavaScript数组

数组

数组是一个可以包含多个值的特殊变量。每个值都有一个位置索引，从0开始。

  1. 创建数组:
    • 可以使用数组字面量创建数组。
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits);  // Output: ['Apple', 'Banana', 'Cherry']
  1. 访问数组元素:
    • 通过索引来访问数组的元素。
console.log(fruits[0]);  // Output: 'Apple'
  1. 修改数组元素:
    • 通过索引来修改数组的元素。
fruits[1] = 'Blueberry';
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']
  1. 数组长度:
    • 使用 length 属性获取数组的长度。
console.log(fruits.length);  // Output: 3
  1. 添加元素:
    • 使用 push 方法在数组末尾添加元素。
fruits.push('Durian');
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry', 'Durian']
  1. 删除元素:
    • 使用 pop 方法删除数组末尾的元素。
fruits.pop();
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']
  1. 添加元素到数组的开头:
    • 使用 unshift 方法在数组的开头添加元素。
fruits.unshift('Avocado');
console.log(fruits);  // Output: ['Avocado', 'Apple', 'Blueberry', 'Cherry']
  1. 删除数组的第一个元素:
    • 使用 shift 方法删除数组的第一个元素。
fruits.shift();
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']
  1. 查找元素:
    • 使用 indexOf 方法查找元素的索引。
console.log(fruits.indexOf('Blueberry'));  // Output: 1
  1. 遍历数组:
    • 使用 forEach 方法遍历数组。
fruits.forEach(function(item, index, array) {console.log(item, index);
});
  1. 数组切片:
    • 使用 slice 方法创建一个新的数组，它包含原数组的指定部分。
let citrusFruits = fruits.slice(1, 3);
console.log(citrusFruits);  // Output: ['Blueberry', 'Cherry']
  1. 数组拼接:
    • 使用 concat 方法将两个或多个数组连接在一起。
let vegetables = ['Carrot', 'Potato'];
let food = fruits.concat(vegetables);
console.log(food);  // Output: ['Apple', 'Blueberry', 'Cherry', 'Carrot', 'Potato']
  1. 数组排序:
    • 使用 sort 方法对数组的元素进行排序。
fruits.sort();
console.log(fruits);  // Output: ['Apple', 'Blueberry', 'Cherry']

通过以上的描述和示例代码，可以了解到JavaScript数组的基本操作和常用方法，这些方法提供了对数组元素的增、删、查、改等操作。同时，也能理解数组在编程中的重要性和其在数据管理方面的应用。

JavaScript对象

对象

JavaScript对象是键值对的集合，它是一种复杂的数据结构，可以包含多个属性和方法。

  1. 创建对象:
    • 使用对象字面量创建对象。
let person = {firstName: "John",lastName: "Doe",age: 25
};
console.log(person);  // Output: {firstName: "John", lastName: "Doe", age: 25}
  1. 访问对象属性:
    • 使用点标记法或方括号标记法访问对象的属性。
console.log(person.firstName);  // Output: 'John'
console.log(person['lastName']);  // Output: 'Doe'
  1. 修改对象属性:
    • 直接赋值来修改对象的属性。
person.age = 26;
console.log(person.age);  // Output: 26
  1. 添加新属性:
    • 直接赋值来添加新的属性。
person.gender = 'male';
console.log(person.gender);  // Output: 'male'
  1. 删除属性:
    • 使用 delete 操作符删除对象的属性。
delete person.gender;
console.log(person.gender);  // Output: undefined
  1. 检查属性是否存在:
    • 使用 in 操作符检查对象是否包含某个属性。
console.log('firstName' in person);  // Output: true
console.log('gender' in person);  // Output: false
  1. 遍历对象:
    • 使用 for...in 循环遍历对象的属性。
for (let key in person) {console.log(key, person[key]);
}
  1. 方法:
    • 对象可以包含方法（函数）。
let person = {firstName: "John",lastName: "Doe",getFullName: function() {return this.firstName + ' ' + this.lastName;}
};console.log(person.getFullName());  // Output: 'John Doe'
  1. 对象构造函数:
    • 使用构造函数创建对象。
function Person(firstName, lastName, age) {this.firstName = firstName;this.lastName = lastName;this.age = age;
}let person1 = new Person('John', 'Doe', 25);
console.log(person1);  // Output: Person {firstName: "John", lastName: "Doe", age: 25}

通过以上的描述和示例代码，可以了解到JavaScript对象的基本操作和常用方法，以及如何对对象的属性和方法进行增、删、查、改等操作。同时，也能理解对象在编程中的重要性和其在数据管理及功能封装方面的应用。

JavaScript DOM (Document Object Model)

JavaScript DOM 是一个编程接口，它为Web文档提供了结构化的表示，并使程序能够访问和修改文档的结构、样式和内容。当网页被加载时，浏览器会创建页面的文档对象模型（DOM），它将网页文档作为节点树来组织，使得JavaScript可以通过选择和操作这些节点来影响网页的显示和行为。

  1. 获取元素:
    • 通过ID获取元素：
let element = document.getElementById("myElement");
  • 通过类名获取元素：
let elements = document.getElementsByClassName("myClass");
  • 通过标签名获取元素：
let elements = document.getElementsByTagName("div");
  • 通过CSS选择器获取元素：
let element = document.querySelector("#myElement");
let elements = document.querySelectorAll(".myClass");
  1. 修改元素内容:
    • 修改元素的文本内容：
element.textContent = "New text content";
  • 修改元素的HTML内容：
element.innerHTML = "<strong>New HTML content</strong>";
  1. 修改元素属性:
    • 获取、设置、删除属性：
element.getAttribute('title');  // 获取title属性
element.setAttribute('title', 'New Title');  // 设置title属性
element.removeAttribute('title');  // 删除title属性
  1. 修改元素样式:
element.style.color = "blue";
element.style.fontSize = "20px";
  1. 元素的类操作:
    • 添加、删除、切换类：
element.classList.add("newClass");  // 添加类
element.classList.remove("oldClass");  // 删除类
element.classList.toggle("toggleClass");  // 切换类
  1. 创建和插入元素:
let newElement = document.createElement("div");  // 创建新元素
element.appendChild(newElement);  // 将新元素插入到现有元素的末尾
  1. 删除元素:
element.removeChild(newElement);  // 从现有元素中删除子元素
  1. 事件监听:
element.addEventListener("click", function() {alert("Element was clicked!");
});

通过上述的示例和解释，你可以了解到JavaScript DOM的基本操作，以及如何通过JavaScript来获取、修改、添加或删除DOM元素和属性，以及如何为DOM元素添加事件监听器。DOM是JavaScript在网页开发中非常核心的概念，它使得JavaScript能够与网页交互，为网页提供动态功能。

JavaScript DOM (Document Object Model)

JavaScript DOM (Document Object Model) 是为 HTML 和 XML 文档提供了结构化的表示。它是一个用于文档的编程接口（API），可以让开发者通过 JavaScript 来访问和更新文档的内容、结构和样式。JavaScript 的 DOM 操作是前端开发中非常核心和基础的知识点，对于理解和掌握前端开发有着至关重要的意义。

DOM 将文档解析为一个由节点和对象（包括元素如 <p> 和 <div>）组成的结构体系，这使得编程语言能够交互并对文档结构、样式和内容进行操作。

DOM结点操作

以下是 JavaScript DOM 的主要特点和操作：

  1. 元素选择:
    • 通过 ID 选择元素：每个元素都可以有一个 ID 属性，它在文档中是唯一的。
let elementById = document.getElementById('myElement');
  • 通过类名选择元素：可以选择具有特定类名的元素，它返回一个 NodeList。
let elementsByClassName = document.getElementsByClassName('myClass');
  • 通过标签名选择元素：它返回一个包含所有给定标签名的元素的 NodeList。
let elementsByTagName = document.getElementsByTagName('div');
  • 通过 CSS 选择器选择元素：可以使用 CSS 选择器来选择元素。
let singleElement = document.querySelector('.myClass');  // 返回第一个匹配的元素
let allElements = document.querySelectorAll('.myClass');  // 返回所有匹配的元素
  1. 元素内容和属性的操作:
    • 修改元素内容：可以通过 textContent 或 innerHTML 属性来修改元素的内容。
element.textContent = "New text content";
element.innerHTML = "<strong>New HTML content</strong>";
  • 获取和设置元素属性：可以通过 getAttribute() 和 setAttribute() 方法来获取和设置元素的属性。
let title = element.getAttribute('title');
element.setAttribute('title', 'New Title');
  • 移除元素属性：可以使用 removeAttribute() 方法来移除元素的属性。
element.removeAttribute('title');
  1. 样式操作:
    • 设置元素样式：可以通过 style 属性来直接设置元素的样式。
element.style.color = "blue";
element.style.fontSize = "20px";
  • 操作类：可以使用 classList 属性来添加、删除或切换元素的类。
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');
  1. 元素的创建、插入和删除:
    • 创建新元素：可以使用 document.createElement() 方法来创建新元素。
let newElement = document.createElement('div');
  • 插入新元素：可以使用 appendChild() 或 insertBefore() 方法来插入新元素。
element.appendChild(newElement);  // 在末尾插入新元素
element.insertBefore(newElement, element.firstChild);  // 在开始处插入新元素
  • 删除元素：可以使用 removeChild() 方法来删除子元素。
element.removeChild(newElement);
  1. 事件监听:
  • 添加事件监听器：可以使用 addEventListener() 方法来为元素添加事件监听器。
element.addEventListener('click', function() {alert('Element was clicked!');
});
  • 移除事件监听器：可以使用 removeEventListener() 方法来移除事件监听器。
function handleClick() {alert('Element was clicked!');
}element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);
  1. 遍历 DOM:
  • 子元素和父元素：可以通过 childNodes, children, parentNode 和 parentElement 属性来访问元素的子元素和父元素。
let childNodes = element.childNodes;
let children = element.children;
let parentNode = element.parentNode;
let parentElement = element.parentElement;
  • 兄弟元素：可以通过 nextSibling, nextElementSibling, previousSibling 和 previousElementSibling 属性来访问元素的兄弟元素。
let nextSibling = element.nextSibling;
let nextElementSibling = element.nextElementSibling;
let previousSibling = element.previousSibling;
let previousElementSibling = element.previousElementSibling;

JavaScript 定时器

JavaScript 提供了一些内置的定时器函数，允许开发者在特定的时间间隔后执行代码，或者在一段时间延迟后执行代码。这为创建动画、游戏或其他时间敏感的应用程序提供了基础。

主要有两种类型的定时器：

  1. setTimeout:

    • setTimeout 用于在指定的毫秒数后执行一段代码。
    • 语法：
    var timeoutID = setTimeout(function, delay, arg1, arg2, ...);
    • 示例：
    var timeoutID = setTimeout(function() {alert('This message will appear after 2 seconds');
}, 2000);

  2. setInterval:

    • setInterval 用于每隔指定的毫秒数重复执行一段代码。
    • 语法：
    var intervalID = setInterval(function, delay, arg1, arg2, ...);
    • 示例：
    var counter = 0;
var intervalID = setInterval(function() {counter++;console.log('This message will appear every 2 seconds. Counter: ' + counter);if (counter >= 5) {clearInterval(intervalID);  // 在 counter 达到 5 时停止定时器}
}, 2000);

  3. 清除定时器:

    • 使用 clearTimeout 和 clearInterval 函数来取消之前通过 setTimeout 和 setInterval 设置的定时器。
    • 语法：
    clearTimeout(timeoutID);
clearInterval(intervalID);
    • 示例：
    var timeoutID = setTimeout(function() {alert('This message will never appear due to clearTimeout');
}, 2000);clearTimeout(timeoutID);  // 取消定时器

  4. requestAnimationFrame:

    • 对于动画来说，requestAnimationFrame 是一个更现代、更高效的替代方案，它允许浏览器在下一个重绘之前调用你的函数，以此来更新动画。
    • 语法：
    var animationID = requestAnimationFrame(callback);
    • 示例：
    function animate() {// Update your animation here...requestAnimationFrame(animate);
}animate();  // 开始动画

通过定时器和 requestAnimationFrame，你可以在 JavaScript 中实现时间控制和动画效果，从而为用户提供丰富的交互体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/188788.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

业余爱好-社会工程管理记账报税

业余爱好-社会工程管理记账报税

税务问题笔记 印花税税费申报及缴纳财务和行为税合并纳税申报增值税及附加税费申报企业所得税季度A类申报残疾人就业保障金申报财务报表个税申报 印花税 印花税是对在经济活动和经济交往中书立、领受具有法律效力的凭证的行为征收的一种税。 税费申报及缴纳 财务和行为税合并…
阅读更多...
LeetCode Hot100 75.颜色分类

LeetCode Hot100 75.颜色分类

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 so…
阅读更多...
Mybatis核心配置文件概述

Mybatis核心配置文件概述

MyBatis核心配置文件层级关系 configuration配置 properties属性 settings设置 typeAliases类型别名 typeHandlers类型处理器 objectFactory对象工厂 plugins插件 environments环境 environrnent 环境变量 transactionManager事务管理器 dataSource数据源 databaseldPr…
阅读更多...
CentOS 7安装Java 8

CentOS 7安装Java 8

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 要在CentOS 7上安装Java 8&#xff0c;请按照以下步骤操作&#xff1a; 打开终端并以root身份登录。 更新系统软件包&#xff1a; …
阅读更多...
淘宝订单接口在电商行业中的重要性

淘宝订单接口在电商行业中的重要性

一、引言 随着电子商务的快速发展&#xff0c;电商平台已经成为人们日常生活中不可或缺的一部分。淘宝作为中国最大的电商平台之一&#xff0c;拥有庞大的用户群体和商家资源。为了满足商家和消费者之间的交易需求&#xff0c; &#xff0c;其中订单接口是其中最为重要的一部分…
阅读更多...
大数据：Hadoop刷题

大数据：Hadoop刷题

大数据&#xff1a;Hadoop刷题 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要…
阅读更多...
Day04：每日一题：2661. 找出叠涂元素

Day04：每日一题：2661. 找出叠涂元素

2661. 找出叠涂元素 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。 arr 和 mat 都包含范围 [1&#xff0c;m * n] 内的 所有 整数。从下标 0 开始遍历 arr 中的每个下标 i &#xff0c;并将包含整数 arr[i] 的 mat 单元格涂色。请你找出 arr 中在 mat…
阅读更多...
【PixPin】媲美QQ/Snipaste截图贴图OCR工具

【PixPin】媲美QQ/Snipaste截图贴图OCR工具

PixPin PixPin是一款截图工具&#xff0c;它集成了截图、长截图、贴图、标注、OCR识别等众多功能&#xff0c;软件体积小巧&#xff0c;使用简单&#xff0c;是一款非常棒的截图工具。之前使用过Snipaste工具的小伙伴用起来应该是得心应手。 从左往右的功能依次是&#xff1a;…
阅读更多...
jetson nano网络配置（有线、无线、USB）

jetson nano网络配置（有线、无线、USB）

文章目录 网络配置&#xff08;有线、无线&#xff09;1.前言1.1 RJ451.2 无线网卡 2.有线连接2.1 连接方法2.2 检测连接状态 3.无线3.1 网卡安装步骤3.2 连接方法3.3 检测连接状态 4.通过USB 线控制Jetson Nano4.1 连接4.2 查看设备4.3 查看设备IP 网络配置&#xff08;有线、…
阅读更多...
接口幂等+防重复提交+失败重试

接口幂等+防重复提交+失败重试

1、接口幂等 接口幂等性就是用户对同一接口发起了一次或多次请求之后&#xff0c;对数据的影响是不变的&#xff0c;不会因为多次请求而产生不同的结果。 实现方案&#xff1a; 调用方传&#xff1a;参数UUID&#xff0c;当接口请求参数和UUID生成key&#xff0c;存到Redis状态…
阅读更多...
ThinkPHP 2.x任意代码执行漏洞

ThinkPHP 2.x任意代码执行漏洞

任务一&#xff1a; 复现环境中的代码漏洞 任务二&#xff1a; 尝试利用代码执行漏洞读取服务器web目录下的文件列表。 任务一&#xff1a; 1.搭建环境&#xff1a; 2.在php环境下直接输入{${phpinfo}}测试代码片段 2.写入一句话木马&#xff0c;用antsword连接&#xff0…
阅读更多...
【Java8系列07】Java8日期处理

【Java8系列07】Java8日期处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
安装nessus

安装nessus

此处建议使用香港服务器 docker pull ramisec/nessus docker run -itd --namenessus -p 18834:8834 ramisec/nessus docker exec -it nessus /bin/bash /nessus/update.sh 或下载拷贝插件包 docker cp all-2.0.tar.gz nessus:/nessus/ 更改Nessus镜像的默认密码 docker ex…
阅读更多...
nodejs_vue+vscode美容理发店会员管理系统un1dm

nodejs_vue+vscode美容理发店会员管理系统un1dm

按照设计开发一个系统的常用流程来描述系统&#xff0c;可以把系统分成分析阶段&#xff0c;设计阶段&#xff0c;实现阶段&#xff0c;测试阶段。所以在编写系统的说明文档时&#xff0c;根据系统所处的阶段来描述系统的内容。 绪论&#xff1a;这是对选题的背景&#xff0c;意…
阅读更多...
IntelliJ IDEA详细完整安装教程

IntelliJ IDEA详细完整安装教程

IntelliJ IDEA 是一款强大的Java集成开发环境&#xff0c;以下是安装和使用教程&#xff1a; 1. 下载IntelliJ IDEA&#xff1a;访问JetBrains官网&#xff08;jetbrains.com&#xff09;&#xff0c;点击“Download”按钮&#xff0c;选择适合自己操作系统的版本进行下载。 2.…
阅读更多...
停止在 TypeScript 中使用 any 类型

停止在 TypeScript 中使用 any 类型

停止在 TypeScript 中使用 any 类型 TypeScript 是 Web 开发人员中最常用的编程语言之一。它具有出色的语言功能&#xff0c;允许我们轻松设计可扩展的应用程序。因此&#xff0c;开发人员倾向于在项目中选择 TypeScript 而不是 JavaScript。 然而&#xff0c;在使用 TypeScr…
阅读更多...
Python【寻找重复的数字】

Python【寻找重复的数字】

要求&#xff1a; 给定一个包含n1个整数的数组nums&#xff0c;其数字在1到n之间&#xff08;包含1和n&#xff09;&#xff0c; 可知至少存在一个重复的整数&#xff0c;假设只有一个重复的整数&#xff0c; 请找出这个重复的数 代码如下&#xff1a; # 寻找重复数字…
阅读更多...
【独家OD2023C卷真题】20天拿下华为OD笔试【排序】2023C-开源项目热榜【欧弟算法】全网注释最详细分类最全的华为OD真题题解

【独家OD2023C卷真题】20天拿下华为OD笔试【排序】2023C-开源项目热榜【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出说明 示例二输入输出说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 某个开源社区希望将最近热度比较高的开源项目出一个榜单&#xff0c;推荐给…
阅读更多...
Python全栈之基本数据类型详解

Python全栈之基本数据类型详解

文章目录 1.注释2.输出3.变量4.命名规范5.变量的定义方式1.字符串类型2.数字类型3.List列表类型4.tuple 元组类型的定义5.Dict字典类型6.set集合类型7.数据类型转换8.自动类型转换9.强制类型转换关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品…
阅读更多...
使用Dockerfile构建镜像遇到的异常分享：Failed to download metadata for repo ‘appstream‘

使用Dockerfile构建镜像遇到的异常分享：Failed to download metadata for repo ‘appstream‘

场景 使用自定义Dockerfile构建Redis镜像时&#xff0c;出现了异常 Dockerfile文件内容如下&#xff1a; FROM centos RUN ["yum","install","-y","gcc","gcc-c","net-tools","make"] WORKDIR /docke…
阅读更多...
最新文章

Copyright @ 2022~2023