前端——js补充

news2024/12/27 15:28:55

一、数学对象

1.随机数

// 0-1

console.log(Math.random());

// 0-9

console.log(Math.random() * 9);

// 6-13

console.log(Math.random() * (13 - 6) + 6);

//n-m

Math.random() * (m - n) + n

2.取整

// 向下取整

console.log(Math.floor(1.9));//1

// 向上取整

console.log(Math.ceil(1.1));//2

// 四舍五入

console.log(Math.round(1.49)); // 1

3.其他

console.log( (2.12312412).toFixed(2) );//2.12

console.log(Math.abs(-888));//888

console.log(Math);

二、定时器对象

1.定时炸弹

let d;

document.querySelector('#k').onclick = () => {

console.log("死歌开大！");

// 设为定时器

d = setTimeout(() => {

console.log("敌方全部，上路。");

}, 3000);

}

document.querySelector('#z').onclick = () => {

console.log("死歌被干掉，大招未成功。");

// 清除定时器

clearTimeout(d)

}

2.定时任务

let b

document.querySelector('#k').onclick = () => {

console.log('天气冷了。');

let i = 0;

// 设置定时任务

b = setInterval(() => {

console.log("妈妈：天气这么冷了，你咋还不穿秋裤？", i++);

}, 2000)

}

document.querySelector('#z').onclick = () => {

// 清除定时任务

clearInterval(b)

console.log("行行行，我穿还不行嘛。");

}

三、日期对象

1.当前时间

console.log(new Date());

2.特定时间

console.log(new Date('2024-06-26 20:00:00'));

console.log(new Date('2024-07-27 20:00:00'));

let d = new Date('2024-07-27 20:01:54');

console.log(d.getFullYear()); // 年

console.log(d.getMonth() + 1); // 月

console.log(d.getDate()); // 日

console.log(d.getHours()); // 时

console.log(d.getMinutes()); // 分

console.log(d.getSeconds()); // 秒

3.特殊时间

console.log(d.getTime()); // 时间戳单位毫秒

console.log(d.getDay());

四、存储对象

1.临时存储

// 增加数据 // 修改数据

sessionStorage.setItem("宇智波厚度", "吊打一打七")

sessionStorage.setItem("宇智波厚度", "吊打一打七 + 干柿鬼鲛")

// 查数据

console.log(

sessionStorage.getItem("宇智波厚度")

);

// 删除数据

sessionStorage.removeItem("宇智波厚度")

// 清空

sessionStorage.clear()

2.永久存储

// 增加数据 // 修改数据

localStorage.setItem("宇智波厚度", "吊打一打七")

localStorage.setItem("宇智波厚度", "吊打一打七 + 干柿鬼鲛")

// 查数据

console.log(

localStorage.getItem("宇智波厚度")

);

// 删除数据

localStorage.removeItem("宇智波厚度")

// 清空

localStorage.clear()

五、同步和异步

1.同步

let time = 0;

// 吃早餐 10 、上课 100 、打游戏 20、聊天 20

console.log(` 吃早餐 10 `, time += 10);

console.log(` 上课 100 `, time += 100);

console.log(` 打游戏 20 `, time += 20);

console.log(` 聊天 20 `, time += 20);

console.log(time);

console.log(` 上课 100 吃早餐 10 打游戏 20 聊天 20`, time += 100);

2.异步

console.log(1);

// 异步代码

setTimeout(() => {

console.log(2);

}, 2000)

console.log(3);

六、promise对象

<!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>

    new Promise((正常反馈, 异常反馈) => {
    //   // 异步代码
      setTimeout(() => {
        console.log('我是异步代码');
        正常反馈('我是异步代码12312');
      }, 2000)
    })
    .then((e)=>{
      console.log(e);
    })
    .catch(e=>{
      console.log(e);
    })



    function name() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('xxx')
          resolve('1宇智波厚度');
          // console.log('1宇智波厚度');
        }, 2000)
      })
    }



    // 使用async 和 await 可以实现在函数内无异步
    (async ()=>{
      try{
        console.log(await name());
      }catch(e){
        console.error(e);
      }

      console.log("2我就是宇智波厚渡！");
    })()
    
    

    // name().then((result) => {
    //   console.log(result);
    // })
    // console.log("2我就是宇智波厚渡！");


  </script>


</body>

</html>