成为前端牛马第十七天 —— JS练习

咸鱼茄子煲OvO

已于 2024-08-10 16:21:50 修改

阅读量263

点赞数 6

文章标签：前端 javascript servlet

于 2024-08-10 15:23:59 首次发布

本文链接：https://blog.csdn.net/m0_67963390/article/details/141090186

版权

一. 鼠标移入移出

写一个当鼠标移入和移出，背景颜色切换的效果。

<!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>
      .box {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      //1.鼠标移入移出修改背景颜色
      let box = document.querySelector(".box");
      //监听鼠标移入移出事件，进行背景颜色切换
      box.addEventListener("mouseenter", () => {
        box.style.backgroundColor = getRandomColor();
      });
      box.addEventListener("mouseleave", () => {
        box.style.backgroundColor = getRandomColor();
      });

      //1. 封装函数获取随机的颜色
      function getRandomColor() {
      // 声明变量
       var red = Math.floor(Math.random() * 256);
       var green = Math.floor(Math.random() * 256);
       var blue = Math.floor(Math.random() * 256);

      // 返回字符串
      return `rgba(` + red + `,${green},${blue},.6)`;
     }
    </script>
  </body>
</html>

二. 不重复随机数

求取1-50之间的随机数，不可以出现重复。如果不足两位，则在该数字前补足“0”。

要实现随机数不重复，思路为，先声明一个数组，存放需要的随机数，再进行一次for循环，生成所需个数的随机数，将生成的随机数作为数组的索引，取出一个就删除一个，这样就可以让取出的数值不重复。

<script>
      //2.1-50的随机数
      function fn(num) {
        //生成一个长度为50，元素为1~50的数组，并进行缺位加0判断
        let arr = [];
        for (let i = 1; i < num + 1; i++) {
          if (i < 10) {
            i = "0" + i;
          }
          arr.push(i);
        }
        //循环50次，每一次循环都生成一个随机数作为索引，即arr要删除的元素，删除的元素转入到新数组，形成一个乱序的随机数组
        let newArr = [];
        for (let i = 0; i < num; i++) {
          let random = Math.floor(Math.random() * arr.length);
        //虽然随机数会有重复，但生成一个随机数，数组就删除一个，相同的数组索引对应的值不是同一个，所以能够不重复
          newArr.push(arr.splice(random, 1)[0]);
        }
        return newArr;
      }
      console.log(fn(50));
</script>

三. 手写字符串反转方法

可以采用倒序循环，从末尾遍历字符串，再添加到临时字符串中；或者采用以下正序遍历方法。

<script>
//4.字符串反转
      let str = "abcde1234";
      function str_reserve(str) {
        let temp = "";
        for (let i = 0; i < str.length; i++) {
          temp += str[str.length - 1 - i];
        }
        return temp;
      }
      console.log(str_reserve(str));//4321edcba
</script>

四. 字符串大写格式化

将字符串open_my_door这种形式，转成OpenMyDoor的形式。

该类型字符串按下划线隔开，组件使用字符串split方法，分割字符串转成数组，再遍历该数组，提取其首位字母大写，再删除掉原数组的第一个字母，最后添加到临时字符串中并返回即可。

<script>
//5.字符串转格式
      let str = "open_my_door";
      function fn1(str) {
        let strArr = str.split("_");//字符串分割转成数组
        let temp = "";
        for (let i = 0; i < strArr.length; i++) {
          let Upper = strArr[i][0].toUpperCase();//选取数组第一个元素的第一个字母
          let nowStr = Upper + strArr[i].slice(1);//将原数组的第一个字母删除
          // console.log(nowStr);
          temp += nowStr;
        }
        return temp;
      }
      console.log(fn1(str));
</script>

五. 数组去重

最简单方法是使用set数据结构，以下是采用单层循环的复古写法，需要注意的是，数组去重前最好先使用sort( )排序，以及数组删除重复元素的索引值减一。

<script>
function fn2(list) {
        console.log(list.sort());
        for (let i = 0; i < list.sort().length; i++) {
          if (list[i] == list[i + 1]) {
            list.splice(i, 1);
            i--;
          }
        }
        return list;
      }
      console.log(fn2([1, 2, 3, 1, 1]));
</script>

第一轮循环，对比 list [0] 和 list [1] ，两者重复，删除 list [0]，数组长度减少，变成四个长度，如果索引值不减一，那么下一轮循环就是 list [1] 对比 list [2] ，也就是1对比2，最开始的1就被忽略掉了，导致去重失败，所以这些细节必须多多注意