自用测试题

最新推荐文章于 2024-11-01 12:26:05 发布

子夕若晨

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量66

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/caizhuangzhuang/article/details/130421940

版权

该文档展示了一个HTML页面结构，包含三个不同颜色的div布局。此外，还提供了JavaScript代码，用于按年龄对人员数据进行分组以及实现进制转换功能。代码中还包含了将下划线命名转换为大驼峰命名的函数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        width: 100%;
      }
      .a {
        width: 200px;
        background-color: cadetblue;
        height: 100vh;
      }
      .b {
        flex: 1;
        height: 100vh;
        background-color: blueviolet;
      }
      .c {
        width: 200px;
        height: 100vh;
        background-color: chartreuse;
      }
    </style>
  </head>
  <body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
  </body>
</html>

<script>
  const people = [
    {
      name: "a",
      age: 30,
      sex: "female",
    },
    {
      name: "b",
      age: 30,
      sex: "male",
    },
    {
      name: "c",
      age: 25,
      sex: "male",
    },
    {
      name: "d",
      age: 28,
      sex: "famale",
    },
    {
      name: "e",
      age: 40,
      sex: "male",
    },
    {
      name: "f",
      age: 40,
      sex: "famale",
    },
  ];

  // 按照年龄分组，将年龄作为属性名

  function groupBy(arr, propName) {
    const result = {};

    for (const item of arr) {
      const key = item[propName];
      if (!result[key]) {
        result[key] = [];
      }
      result[key].push(item);
    }
    return result;
  }
  // console.log(groupBy(people, "age"));

  // 进制转换
  function convert(n, base) {
    console.log(n);
    // 0 不用转换
    if (n === 0) {
      return "0";
    }
    let res = "";
    let isPositiveNum = true;
    if (n < 0) {
      n = -n;
      isPositiveNum = false;
    }
    while (n !== 0) {
      let yushu = n % base;
      res += yushu;
      n = Math.floor(n / base);
    }
    res = res.split("").reverse().join("");
    return isPositiveNum ? res : "-" + res;
  }

  console.log(convert(2019, 7));

  /* --------------下划线转换为大驼峰命名 */
  function changeNameFunc(name, symbol) {
    let arr = name.split("");
    arr.map((item, index) => {
      if (item == symbol) {
        arr.splice(index, 1);
        // toUpperCase()  作用是转换成大写
        arr[index] = arr[index].toUpperCase();
      }
    });
    return arr.join("");
  }
  // let name = changeNameFunc("goods_list");
  // console.log(changeNameFunc("goods_list", "_"));
</script>