JavaScript的定时器第六天_let user=json.parse(-CSDN博客

本文链接：https://blog.csdn.net/m0_74242675/article/details/136066563

JavaScript中的字符串是一串字符的序列，可以使用引号（单引号或双引号）来表示。字符串可以包含字母、数字、符号和空格等字符。例如：

let str1 = "Hello";
let str2 = 'World';
let str3 = `JavaScript`;

在JavaScript中，字符串是不可变的，也就是说一旦创建了一个字符串，就无法修改它的值。但是可以通过使用字符串方法来操作字符串，例如连接字符串、截取子串、替换字符等。

定时器是JavaScript中的一个功能，用于推迟代码的执行或周期性地执行代码。定时器有两种类型：setTimeout和setInterval。

setTimeout函数用于在指定的时间后执行一次代码。它接受两个参数，第一个参数是要执行的代码，可以是函数或字符串，第二个参数是延迟的时间（以毫秒为单位）。例如：

setTimeout(() => {
  console.log("Hello, World!");
}, 2000);

上述代码表示延迟2秒后输出"Hello, World!"。

setInterval函数用于每隔一段时间重复执行一次代码。它也接受两个参数，第一个参数是要执行的代码，第二个参数是重复执行的间隔时间（以毫秒为单位）。例如：

setInterval(() => {
  console.log("Hello, World!");
}, 1000);

上述代码表示每隔1秒输出一次"Hello, World!"。需要注意的是，setInterval会一直执行下去，直到页面关闭或清除定时器。可以使用clearInterval函数来清除定时器。

1-字符串的基本操作

在JavaScript中，字符串是不可变的字符序列，具有多种基本操作。以下是一些字符串基本操作的例子：

// 创建一个字符串
let myString = "Hello, World!";

// 1. 访问字符串中的字符：通过索引访问
console.log(myString[0]); // 输出: "H"

// 2. 字符串长度
console.log(myString.length); // 输出: 13

// 3. 字符串连接
let greeting = "Welcome " + myString; // 使用加号（+）连接字符串
console.log(greeting); // 输出: "Welcome Hello, World!"

// 4. 截取字符串的一部分
let substring = myString.substring(7, 12); // 提取索引7到11之间的子串
console.log(substring); // 输出: "World"

// 5. 查找子字符串
let index = myString.indexOf("World"); // 返回"World"首次出现的索引位置
console.log(index); // 输出: 7

// 6. 转换大小写
let upperCase = myString.toUpperCase(); // 将字符串转换为大写
console.log(upperCase); // 输出: "HELLO, WORLD!"

let lowerCase = myString.toLowerCase(); // 将字符串转换为小写
console.log(lowerCase); // 输出: "hello, world!"

// 7. 替换子字符串
let replaced = myString.replace("World", "Universe");
console.log(replaced); // 输出: "Hello, Universe!"

// 8. 判断是否包含某个子字符串
if (myString.includes("World")) {
  console.log("The string contains 'World'.");
}

// 9. 分割字符串
let words = myString.split(", "); // 使用逗号和空格作为分隔符分割字符串
console.log(words); // 输出: ["Hello", "World!"]

以上展示了JavaScript中一些常见的字符串基本操作，包括访问、获取长度、拼接、截取、查找子串、转换大小写、替换子串、判断是否包含特定子串以及分割字符串等。

2-案例-统计字符出现次数

在JavaScript中，统计字符串中每个字符出现的次数可以使用对象（Object）来存储结果。以下是一个简单的例子：

function countCharacters(str) {
  let charCount = {};

  // 遍历字符串中的每个字符
  for (let char of str) {
    // 如果该字符已经在对象中，则增加计数
    if (charCount[char]) {
      charCount[char]++;
    } 
    // 否则，在对象中创建新的键并设置值为1
    else {
      charCount[char] = 1;
    }
  }

  return charCount;
}

// 测试案例
let testString = "Hello, World!";
console.log(countCharacters(testString));

// 输出：{ H: 1, e: 1, l: 3, o: 2, ',': 1, ' ': 1, W: 1, r: 1, d: 1, '!': 1 }

在这个例子中，我们定义了一个名为countCharacters的函数，它接受一个字符串作为参数。然后通过遍历字符串的每个字符，并使用一个空对象charCount来记录每个字符出现的次数。对于遇到的每一个字符，如果它已经在对象中，则递增其对应的值；如果不在，则将其添加到对象中并初始化值为1。最后返回这个包含了字符及其出现次数的对象。

3-字符串常用方法

在JavaScript中，字符串有许多常用的方法。以下是一些例子：

// 创建一个示例字符串
let myString = "Hello, World! How are you?";

// 1. length属性：获取字符串长度
console.log(myString.length); // 输出: 27

// 2. toUpperCase()：将字符串转换为大写
console.log(myString.toUpperCase()); // 输出: "HELLO, WORLD! HOW ARE YOU?"

// 3. toLowerCase()：将字符串转换为小写
console.log(myString.toLowerCase()); // 输出: "hello, world! how are you?"

// 4. includes()：检查字符串是否包含子字符串
console.log(myString.includes("World")); // 输出: true

// 5. indexOf()：查找指定子字符串首次出现的位置（返回索引）
console.log(myString.indexOf("World")); // 输出: 7

// 6. slice()：提取字符串的一部分
console.log(myString.slice(7, 13)); // 输出: "World"

// 7. substring()：与slice类似，但不接受负数参数
console.log(myString.substring(7, 13)); // 输出: "World"

// 8. split()：按照指定分隔符将字符串分割成数组
console.log(myString.split(" ")); // 输出: ["Hello,", "World!", "How", "are", "you?"]

// 9. replace()：替换字符串中的某个部分
console.log(myString.replace("World", "Universe")); // 输出: "Hello, Universe! How are you?"

// 10. trim()：去除字符串首尾空白字符
let trimmedString = "   Hello, World!   ";
console.log(trimmedString.trim()); // 输出: "Hello, World!"

以上展示了JavaScript中字符串的一些常见操作方法，包括获取长度、转换大小写、判断包含关系、查找位置、截取子串、分割为数组以及替换和修剪等。

4-案例-模糊查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义一个数组
        var arr= ["aaa","abc","bcf","bcd","ddd","ccd","bbb",'ggg']

        // 使用数组的filter方法和字符的indexOf方法进行查询
        var input = prompt("请输入查询的内容")
        var res = arr.filter(function(item){
            return item.indexOf(input)>-1
        })

        console.log(res)
    </script>
</body>
</html>

5-json格式字符串

一个JSON格式的字符串示例如下：

{
  "name": "John Doe",
  "age": 30,
  "isMarried": false,
  "skills": ["JavaScript", "Python", "HTML/CSS"],
  "address": {
    "street": "123 Main St.",
    "city": "New York",
    "country": "USA"
  }
}

这个JSON字符串描述了一个包含姓名、年龄、婚姻状况、技能列表以及地址信息的对象。在JavaScript中，你可以将这个字符串转换为对象进行操作，例如：

let jsonString = '{"name": "John Doe","age": 30,"isMarried": false,"skills": ["JavaScript", "Python", "HTML/CSS"],"address": {"street": "123 Main St.","city": "New York","country": "USA"}}';

// 将JSON字符串转换为JavaScript对象
let user = JSON.parse(jsonString);

console.log(user.name); // 输出: John Doe
console.log(user.age); // 输出: 30
console.log(user.skills[1]); // 输出: Python
console.log(user.address.city); // 输出: New York

通过JSON.parse()方法可以将JSON格式的字符串解析成JavaScript对象，然后就可以像操作普通对象一样访问和修改这些数据。同样，使用JSON.stringify()方法可以把JavaScript对象转换回JSON格式的字符串。

6-模板字符串

在JavaScript中，模板字符串（Template Literals）是一种创建多行字符串或包含嵌入表达式的字符串的简洁方式。以下是一个使用模板字符串的例子：

// 定义变量
let name = "Alice";
let age = 25;

// 使用模板字符串拼接信息
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // 输出: Hello, my name is Alice and I am 25 years old.

在这个例子中，模板字符串使用了反引号 () 而不是单引号 ('') 或双引号 (")。通过 ${}` 可以嵌入任何表达式，其结果将被转换为字符串并插入到最终字符串的相应位置。

另外，模板字符串还可以跨越多行，不需要使用换行符或 \ 进行转义：

let poem = `
  Roses are red,
  Violets are blue,
  ${name}'s favorite color
  might be something else too.
`;

console.log(poem);

这段代码将会输出一个多行字符串，并且其中包含了变量 name 的值。

7-数字常用方法

JavaScript中处理数字的常用方法有多种，以下是一些例子：

toFixed()：用于将数字转换为指定位数的小数格式字符串。

let num = 3.1415926535;
console.log(num.toFixed(2)); // 输出："3.14"

toExponential()：将数字转换为科学记数法表示的字符串。

let num = 123456789;
console.log(num.toExponential(3)); // 输出："1.235e+8"

toFixed() 和 toPrecision()：toFixed() 指定小数点后的位数，toPrecision() 指定总的有效数字位数（包括整数部分和小数部分）。

let num = 123456.789;
console.log(num.toPrecision(5)); // 输出："123000"

Math对象的方法：
- Math.round() 对数值进行四舍五入。
- Math.floor() 向下取整。
- Math.ceil() 向上取整。
- Math.abs() 获取绝对值。

let num1 = 3.14;
console.log(Math.round(num1)); // 输出：3
let num2 = -12.34;
console.log(Math.floor(num2)); // 输出：-13
console.log(Math.ceil(num2)); // 输出：-12
console.log(Math.abs(num2)); // 输出：12.34

Number.isNaN()：检查一个值是否为NaN。

let value = "abc";
console.log(Number.isNaN(value)); // 输出：true

isFinite()：判断给定的值是否为有限的数字。

let num = Infinity;
console.log(isFinite(num)); // 输出：false

这些只是JavaScript中处理数字的一些常见方法，实际上还有更多其他方法可用于数学运算、进制转换等场景。

8-案例-随机整数

在JavaScript中，生成一个指定范围内的随机整数可以使用Math.random()和一些数学运算。以下是一个生成1到10之间（包含边界）随机整数的例子：

// 使用 Math.random() 和 Math.floor() 方法生成 [1, 10] 范围内的随机整数
let randomInt = Math.floor(Math.random() * (10 - 1 + 1)) + 1;

console.log(randomInt);

解释：

Math.random() 返回的是 [0, 1) 区间内的浮点数，即大于等于0且小于1。
我们将其乘以 (10 - 1 + 1) 来得到 [0, 10) 区间的浮点数。
然后使用 Math.floor() 对结果向下取整，得到 [0, 9] 区间内的整数。
最后加上1，使得最终结果位于 [1, 10] 区间内。

这样，每次执行上述代码都会得到1到10之间的一个随机整数。

9-时间对象

当然，以下是一个JavaScript中使用Date对象的简单示例，它展示了如何创建一个当前时间的Date实例，并获取和格式化当前日期与时间：

// 创建一个表示当前时间的Date对象
var currentDate = new Date();

// 获取当前日期（年-月-日）
var currentDateString = currentDate.toISOString().split('T')[0];
console.log("当前日期: " + currentDateString);

// 获取当前时间（小时:分钟:秒）
var currentTimeString = currentDate.toLocaleTimeString();
console.log("当前时间: " + currentTimeString);

// 获取Unix时间戳（毫秒数）
var timestampInMilliseconds = currentDate.getTime();
console.log("当前时间戳（毫秒）: " + timestampInMilliseconds);

// 设置特定日期和时间
var specificDate = new Date(2024, 1, 7); // 月份从0开始计数，所以这里是2月
console.log("特定日期的时间戳: " + specificDate.getTime());

// 格式化输出特定日期
var options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log("特定日期（格式化后）: " + specificDate.toLocaleDateString("en-US", options));

在这个例子中：

new Date() 创建了一个表示当前日期和时间的对象。
toISOString() 方法返回ISO格式的日期字符串，并通过分割来提取日期部分。
toLocaleTimeString() 方法用于获取本地时间格式的时间字符串。
getTime() 方法返回从1970年1月1日0点0分0秒（UTC时间）到当前时间的毫秒数。
当我们直接传入参数给 new Date(year, monthIndex [, day, hour, minute, second, millisecond]) 构造函数时，可以设置特定日期。
toLocaleDateString() 方法可以根据指定的选项格式化日期字符串。

10-时间对象常用方法

在JavaScript中，Date对象提供了很多用于操作日期和时间的方法。下面是一个包含了几个常用方法的例子：

// 创建一个表示当前时间的Date对象
let now = new Date();

// 常用方法示例：
console.log("当前时间（默认格式）: ", now); // 输出当前日期和时间

// 获取完整年份
let year = now.getFullYear();
console.log("当前年份: ", year);

// 获取月份（注意：JavaScript中的月份是从0开始计数的，所以1代表二月）
let month = now.getMonth() + 1; // 加1以获得常规月份表示
console.log("当前月份: ", month);

// 获取日
let day = now.getDate();
console.log("当前日期: ", day);

// 获取小时（24小时制）
let hours = now.getHours();
console.log("当前小时: ", hours);

// 获取分钟
let minutes = now.getMinutes();
console.log("当前分钟: ", minutes);

// 获取秒
let seconds = now.getSeconds();
console.log("当前秒数: ", seconds);

// 获取毫秒
let milliseconds = now.getMilliseconds();
console.log("当前毫秒数: ", milliseconds);

// 设置日期和时间
let specificDate = new Date(2024, 3, 15, 10, 30, 0); // 设置为2024年4月15日10点30分0秒
console.log("特定日期和时间: ", specificDate);

// 格式化输出日期
let formattedDate = now.toLocaleDateString(); // 根据本地环境格式化日期
console.log("格式化后的日期: ", formattedDate);

// 格式化输出时间
let formattedTime = now.toLocaleTimeString(); // 根据本地环境格式化时间
console.log("格式化后的时间: ", formattedTime);

这个例子展示了如何获取和设置日期的各个部分，以及如何格式化显示日期和时间。当然，Date对象还有其他许多方法，例如 setFullYear(), getUTC*() 系列方法（用于处理UTC时间），以及 getTime() 方法返回Unix时间戳等。

11-定时器

JavaScript中的定时器主要有两种类型：setTimeout 和 setInterval。下面分别给出一个例子：

setTimeout 示例

// 在1秒后执行一次 alert 操作
setTimeout(function() {
  alert('Hello, 这是一个延迟一秒的提示！');
}, 1000); // 参数1000代表延迟时间，单位是毫秒

// 使用箭头函数简化写法
setTimeout(() => alert('Hello after 1 second'), 1000);

setInterval 示例

// 每隔2秒执行一次 alert 操作，直到手动清除定时器
let intervalId = setInterval(function() {
  alert('每隔两秒出现一次的消息');
}, 2000);

// 清除定时器（在5次之后）
let counter = 0;
function showMessage() {
  alert(`这是第 ${++counter} 次消息`);
  if (counter === 5) {
    clearInterval(intervalId);
    console.log('定时器已清除');
  }
}
intervalId = setInterval(showMessage, 2000);

在这两个示例中：

setTimeout 的作用是在指定的延迟（以毫秒为单位）后调用指定的回调函数。
setInterval 则会按照指定的时间间隔重复调用回调函数，直到被显式地调用 clearInterval 方法停止。

注意：实际使用时，尤其是对于异步编程场景，请确保正确管理这些定时器，避免资源泄露。例如，在适当的时候清理不再需要的定时器。

12-案例-倒计时

以下是一个使用JavaScript实现倒计时的例子，它从特定的时间开始倒数，显示剩余的天数、小时数、分钟数和秒数：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时示例</title>
<style>
  #countdown {
    font-family: Arial, sans-serif;
  }
</style>
</head>
<body>
<div id="countdown"></div>

<script>
// 目标结束时间，例如：2023年1月1日 00:00:00（UTC时间）
const targetDate = new Date("January 1, 2023 00:00:00").getTime();

function updateCountdown() {
  // 当前时间
  const now = new Date().getTime();

  // 计算时间差（毫秒）
  let distance = targetDate - now;

  // 时间单位转换（天、小时、分钟、秒）
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 在HTML中显示倒计时
  document.getElementById("countdown").innerHTML = `
    <span>${days} 天 </span>
    <span>${hours} 小时 </span>
    <span>${minutes} 分钟 </span>
    <span>${seconds} 秒 </span>
  `;

  // 如果倒计时未结束，则继续更新
  if (distance > 0) {
    setTimeout(updateCountdown, 1000);
  } else {
    // 倒计时结束时可以执行一些操作，比如提示活动已开始
    document.getElementById("countdown").innerHTML = "活动已经开始！";
  }
}

// 初始化倒计时
updateCountdown();
</script>
</body>
</html>