前端0基础---day18Math - Date - 定时器 (javascript)

Math

javascript 复制代码

<!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>
      //console.log(Math);
      //圆周率
      console.log(Math.PI);
      //方法
      //绝对值
      console.log(Math.abs(10), Math.abs(-10));
      //取整 parseInt()
      //向上取整
      console.log(Math.ceil(1.1), Math.ceil(1.9), Math.ceil(-1.2)); //2 2 -1
      //向下取整
      console.log(Math.floor(1.1), Math.floor(1.9), Math.floor(-1.2)); //1 1 -2
      //四舍五入取整
      console.log(Math.round(1.1), Math.round(1.9), Math.round(-1.2)); //1 2 -1
      //随机数
      console.log(Math.random()); //0到1的随机小数，含0不含1
      //取一组数中的最大值
      console.log(Math.max(11, 2, 9)); //11
      //最小值
      console.log(Math.min(11, 2, 9)); //2
      //取x的y次方
      console.log(Math.pow(3, 4)); //81
      console.log(3 ** 4); //81
      //求平方根
      console.log(Math.sqrt(2));
      //三角函数 弧度
      //正弦
      console.log(Math.sin(Math.PI / 6));
      //余弦
      console.log(Math.cos(Math.PI / 6));
      //正切
      console.log(Math.tan(Math.PI / 6));
    </script>
  </body>
</html>

Date

javascript 复制代码

<!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>
      //创建
      //1. 取到当前日期
      let nowDate = new Date();
      console.log(nowDate);
      //2. 取到指定日期
      let preDate = new Date("2024/11/20 18:00:00");
      console.log(preDate);
      //两个日期相减 是毫秒数
      console.log(preDate - nowDate);

      //3.
      let date1 = new Date(2024, 10, 20);
      console.log(date1);
      //4.
      let date4 = new Date(1000); //自1970年1月1日开始经历1000毫秒之后的一个时间
      console.log(date4);
    </script>
  </body>
</html>

日期拆解

javascript 复制代码

<!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>
      let nowDate = new Date();
      //年
      console.log(nowDate.getFullYear()); //2024

      //月
      console.log(nowDate.getMonth()); //10 0-11 0表示1月

      //日
      console.log(nowDate.getDate()); //20

      //周几
      console.log(nowDate.getDay()); //0-6 0表示周日

      //时
      console.log(nowDate.getHours());
      //分
      console.log(nowDate.getMinutes());
      //秒
      console.log(nowDate.getSeconds());
      //毫秒
      console.log(nowDate.getMilliseconds());

      //改值

      /*  nowDate.setFullYear(2025);
      console.log(nowDate); */

      //nowDate.setMonth(4);
      //console.log(nowDate);
      //得到50天之后的一个日期
      nowDate.setDate(nowDate.getDate() + 50);
      console.log(nowDate);
    </script>
  </body>
</html>

定时器

javascript 复制代码

   定时器：每隔一个时间间隔就会自动执行指定代码
     setInterval(fn) setInterval(fn,time)
      function fn() {
        console.log("ok");
      }
      fn(); 
      //每隔1s输出一次ok
      function fn() {
        console.log("ok");
      }
      setInterval(fn, 1000); 

      //每隔2s输出一次ok
      setInterval(function () {
        console.log("ok");
      }, 2000);

javascript 复制代码

      //clearInterval(变量) 清除定时器
   let a = setInterval(() => {
        console.log("ok");
      }, 1000);

回调函数本身并不是必须的，但它是在设置定时器时用来指定触发时要执行的代码

清除定时器要先获取到定时器的 ID

因为JavaScript中的定时器（setTimeout 或 setInterval）是异步执行的，返回一个唯一的ID。这个ID用于区分不同的定时器，以便能精确地停止某个定时器

不是所有的回调函数都是异步进行的分为同步回调和同步回调

异步回调:异步回调必须在主线程完成之后调用

setTimeout / setInterval：延时后执行回调。
事件监听（如 addEventListener）：在某个事件触发后执行回调。
网络请求（如 fetch 或 XMLHttpRequest）：请求完成后执行回调。

同步回调:在当前执行上下文中直接执行的回调。

javascript 复制代码

function sayHello() {
  console.log("Hello");
}

function executeCallback(callback) {
  callback();  // 这里的回调是同步的
}

executeCallback(sayHello);  // 输出 "Hello"

javascript 复制代码

     clearInterval(a); 
     //倒数5个数, 5 4 3 2 1 停
     let count = 5;
     let t1 = setInterval(() => {
       count--;
       box.innerText = count;
       if (count == 0) {
         clearInterval(t1);
         box.innerText = "停";
       }
     }, 1000); 

     //延时器  延迟一个时间间隔才去执行代码，并且只执行一次
     setTimeout(fn,time)  clearTimeout(变量名)
     let t2 = setTimeout(() => {
       console.log("张三");
     }, 5000);
     clearTimeout(t2);

随机十六进制颜色

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="common.js"></script>
    <script>
      function getRandColor() {
        /*  return `rgb(${getRandNum(0, 255)},${getRandNum(0, 255)},${getRandNum(
          0,
          255
        )})`; */

        let randColor = "#";
        let str = "0123456789ABCDEF";
        for (let i = 0; i < 6; i++) {
          let randIdx = Math.floor(Math.random() * str.length);
          randColor += str[randIdx];
        }
        return randColor;
      }
      box.style.backgroundColor = getRandColor();
    </script>
  </body>
</html>

判断密码强弱

javascript 复制代码

<!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>
    <input type="text" id="txt" />
    <script>
      /*  txt.oninput = function () {
        console.lo g(txt.value);
      }; */
      /* 
      数字 小写字母 大写字母
      */
      //失去焦点
      txt.onblur = function () {
        let val = txt.value;
        let a = 0; //默认不含数字
        let b = 0;
        let c = 0;
        for (let i = 0; i < val.length; i++) {
          //把当前字符的码值取到，判断码值的范围
          let code = val.charCodeAt(i);
          //数字
          if (code >= 48 && code <= 57) {
            //含有数字
            a = 1;
          }
          //大写字母
          if (code >= 65 && code <= 90) {
            b = 1;
          }
          //小写字母
          if (code >= 97 && code <= 122) {
            c = 1;
          }
        }
        let sum = a + b + c;
        if (sum == 3) {
          alert("强");
        } else if (sum == 2) {
          alert("中");
        } else {
          alert("弱");
        }
      };
    </script>
  </body>
</html>

四位数验证码

javascript 复制代码

<!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>
      //四位随机数字字符验证码
      /* 
      function getRandCode() {
        let str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        let randCode = "";
        for (let i = 0; i < 4; i++) {
          let randIndex = parseInt(Math.random() * str.length);
          randCode += str[randIndex];
        }
        return randCode;
      }
      console.log(getRandCode()); */

      //48-90  中间58-64不要
      function getRandCode() {
        let randCode = "";
        for (let i = 0; i < 4; i++) {
          //取一个范围的随机整数  码值
          let randNum = parseInt(Math.random() * 43 + 48);
          if (randNum >= 58 && randNum <= 64) {
            i--;
          } else {
            randCode += String.fromCharCode(randNum);
          }
        }
        return randCode;
      }
      console.log(getRandCode());
    </script>
  </body>
</html>

** 统计字符串中各个字母（或元素）出现的次数**

javascript 复制代码

<!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>
      let str = "a,a,b,a,c,d,b";
      let arr = str.split(",");
      let obj = {};
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i]] === undefined) {
          obj[arr[i]] = 1;
        } else {
          obj[arr[i]]++;
        }
      }
      //console.log(obj);
      let keys = "";
      for (let i in obj) {
        keys += i;
        document.write(i + " " + obj[i] + "<br>");
      }
      document.write(keys);
    </script>
  </body>
</html>