title: 每日一题题库 # 文章名称
date: 2021-07-07 19:06:25
updated: new Date()
tags: [tiku] # 文章标籤
categories: [tiku] # 分类
keywords: tiku
description: tiku
op_img: http://www.oss.qcwy.org.cn/mxt/3.jpeg # 【可选】文章顶部图片
cover: http://www.oss.qcwy.org.cn/mxt/4.jpeg # 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments: true
copyright_info: 转载请留言,未经许可禁止转载,转载时请注明出处(必须保留作者署名及链接) #
sticky: 0# 是否置顶

概览

由于每天学习以及练习的题有时候会在工作中使用到，并且一些复杂的题或参考别人做法的题，可能会需要反复查看，如果不整理，很容易丢失或者不好查找，因此，本文应运而生。

耗时

消耗时间是未知的。因为每天都会去写，会去更新

css实现开关

题目

题解一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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>
      body {
        width: 100%;
        height: 100vh;
      }
      .cantainer {
        width: 400px;
        height: 40px;
        margin: 200px auto 0;
        background-color: bisque;
      }
      .item {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .item::after {
        content: "";
        width: 30px;
        height: 30px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        transition: all 0.3s;
      }
      .item:hover {
        background-color: aquamarine;
      }
      .item:hover::after {
        background-color: #fff;
        position: absolute;
        left: calc(90% - 30px);
      }
    </style>
  </head>
  <body>
    <div class="cantainer">
      <div class="item"></div>
    </div>
  </body>
</html>
  • 注意：此方式没有实现背景过度和自适应宽度

效果

题解二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>
      body {
        width: 100%;
        height: 100vh;
      }
      .cantainer {
        width: 400px;
        margin: 200px auto 0;
       
      }
      .item{
          display: flex;
          padding: 5px;
          height: 40px;
          background-color: bisque;
          transition: all 3s;
      }
      .item::after{
          content: '';
          width: 40px;
          height: 40px;
          background-color: #fff;
      }
      .item::before{
          content: '';
          background: transparent;
          width: 0;
          transition: all 3s;
      }
      .item:hover{
          background-color: blueviolet;
          transition: all 3s;
      }
      .item:hover::before{
         width: calc(100% - 40px);
      }
    </style>
  </head>
  <body>
    <div class="cantainer">
      <div class="item"></div>
    </div>
  </body>
</html>

实现了所有的要求，并使用了flex布局

效果

手写js的toLocaleString

实现 12345678.002345 -> 12,345,678.002345

js原生方法实现

1
2
3
const x = 123434343243243242;
const y = x.toLocaleString()
// y => "123,434,343,243,243,250"

abacba 转成 aaa,bb,c

思路:以对象存储，对象的Key代表字母，value代表出现的次数。将得到的对象转化为字符串

答案不唯一

Js 代码实现

1
2
3
4
5
6
7
8
9
10
function strFormate(str) {
  const o = {};
  let s = "";
  str.split("").forEach((e) => (o[e] ? o[e]++ : (o[e] = 1)));
  Object.keys(o).forEach((e) => {
    for (let i = 0; i < o[e]; i++) s += e;
  });
  return s;
}
console.log(strFormate("sdadasdasdsahjk"));//ssssddddaaaahjk

带有排序的

1
2
3
4
5

function strFormate(str) {
  return str.split('').sort().join('');
}
console.log(strFormate("sdadasdasdsahjk"));//aaaaddddhjkssss

带逗号的

1
2
3
4
5
6
7
8
9
10
11
12
13
function strFormate(str) {
  const o = {};
  let s = "";
  let arr=[]
  str.split("").forEach((e) => (o[e] ? o[e]++ : (o[e] = 1)));
  Object.keys(o).sort().forEach((e) => {
    for (let i = 0; i < o[e]; i++) s += e;
    arr.push(s)
    s=''
  });
  return arr.join(',');
}
console.log(strFormate("sdadasdasdsahjk"));//aaaa,dddd,h,j,k,ssss

将一个字符串转化为三角形

题目

思路：

  • 根据图找出规律，每一行比上一行多两个字符
  • 第一行空格等于(最后一行字符+第一行)/2

js代码实现

实现一：

1
2
3
4
5
6
7
8
9
10
11
12
const printPyramind = (str) => {
  let a = [];
  let c = 1;
  let s = "";
  for (let i = 0; i < str.length; ) {
    a.push(str.substr(i, c));
    i += c;
    c += 2;
  }
  a.forEach((e, i) => (s += " ".repeat((a.length - 1 - i) * 2) + e + "\n"));
  return s;
};

实现二：

群友实现的，看着还行，就放这了。思路是一样的，写法不一样！

判断两个版本号的大小-2021-7-26

题目

算法题：Semantic Versioning 是一个前端通用的版本规范。格式为“{MAJOR}.{MINOR}.{PATCH}-{alpha|beta|rc}.{number}”，
要求实现 compare(a, b) 方法，比较 a, b 两个版本大小，

  1. 当 a > b 是返回 1；
  2. 当 a = b 是返回 0；
  3. 当 a < b 是返回 -1；
  4. 其中，rc > beta > alpha，major > minor > patch；
  5. 例子，1.2.3 < 1.2.4 < 1.3.0-alpha.1 < 1.3.0-alpha.2 < 1.3.0-beta.1 < 1.3.0-rc.1 < 1.3.0

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

const compare = (a, b) => {
  a = a
    .replace("-alpha", "-1")
    .replace("-beta", "-2")
    .replace("-rc", "-3")
    .split("-");
  b = b
    .replace("-alpha", "-1")
    .replace("-beta", "-2")
    .replace("-rc", "-3")
    .split("-");
  return contrast(a, b, 0);
};
const contrast = (a, b, index) => {
  const aNum1 = a[index].split(".").join("") * 1,
    bNum1 = b[index].split(".").join("") * 1;
  if (aNum1 > bNum1) {
    return 1;
  } else if (aNum1 < bNum1) {
    return -1;
  }

  if (index < a.length - 1) {
    return contrast(a, b, index + 1);
  } else {
    return 0;
  }
};
const a = " 1.3.0-rc.1";
const b = "1.3.0-beta.1";
console.log(compare(a, b), "---");

其他题解

统计出现次数最多数字和2021-7-27

题目

[‘12a’,’3b’,’4c’,’15d’,’15e’,’2a’] 统计这个数组中出现次数最多的字母前的数字和，这个数组就是a, 12+2 = 14

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const fn = (arr) => {
  const map = new Map();
  arr.forEach((e) => {
    const k = e.replace(/\d/g, "");
    const v = Number(e.replace(/\D/g, ""));
    const a = map.get(k);
    map.has(k)
      ? map.set(k, { num: a.num + 1, count: v + a.count })
      : map.set(k, { num: 1, count: v });
  });
  let n = -1;
  let c;
  for (let [k, v] of map.entries()) if (n < v.num) (n = v.num), (c = v.count);
  return c;
};
console.log(fn(["12a", "3b", "4c", "15d", "15e", "2a"]));

进阶

如果几个数据同时出现最多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const fn = (arr) => {
  const map = new Map();
  arr.forEach((e) => {
    const k = e.replace(/\d/g, "");
    const v = Number(e.replace(/\D/g, ""));
    const a = map.get(k);
    map.has(k)
      ? map.set(k, { num: a.num + 1, count: v + a.count })
      : map.set(k, { num: 1, count: v });
  });
  let n = -1;
  let c = [];
  for (let [k, v] of map.entries()) {
    if (n < v.num) {
      n = v.num;
      c=[],c.push(v)
    }else if (n===v.num) {
      c.push(v)
    }
  }
  return c;
};

console.log(fn(["12a", "3b", "4c", "15d", "15e", "16e","2a"]),'----');

左侧固定，右侧自适应2021-7-28

题目

3种方式实现CSS方式实现左侧宽度固定，右侧自适应布局

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>两篮布局</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    
    <div class="container">
        <div class="item left">
            <ul>
              xxxx
            </ul>
        </div>
        <div class="item right">
            <ul>
               xxx
            </ul>
        </div>
    </div>

</body>
</html>
  • inline-block+calc实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

* {
  margin: 0;
  padding: 0;
}
.container {
  background-color: aqua;
  height: 100vh;
}
.item {
  height: 100%;
  overflow: scroll;
  display: inline-block;
}
.item li {
  list-style: none;
}
.left {
  max-width: 300px;
  background-color: blueviolet;
}
.right{
    width: calc(100% - 306px);
}

  • flex实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
  margin: 0;
  padding: 0;
}
.container {
  background-color: aqua;
  display: flex;
  height: 100vh;
}
.item {
  padding: 10px;
  height: 100%;
  overflow: scroll;
  box-sizing: border-box;
}
.item li {
  list-style: none;
}
.left {
  max-width: 300px;
  background-color: blueviolet;
}

进阶

本人知道的所有实现方式

  • table、float、grid、负边距、padding+transform、inline-block、position、flex

    其中有的方式可有多种方式实现

js 判断一个对象是数组的方式2021-7-29

题目

js 判断一个对象是数组的方式

题解

失败重发ajax请求2021-8-3

题目

手写一个方法实现请求失败后一定时间后重试，重试时间是上次的两倍

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


function request() {
  let xhr = new XMLHttpRequest();
  xhr.open("post", "https://www.xxx.com");
  xhr.timeout = 200;
  xhr.send({ speek: "I Love You ❤️" });
  return new Promise(function (resolve, reject) {
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error("请求失败"));
        }
      } else {
        reject(new Error("请求失败"));
      }
    };
  });
}
(function resetRequset(params) {
  let isSuccess = false;
  let time = 0;

  if (!isSuccess) {
    (function preRequest() {
      if (time > 10000) {
        console.log("请求重试失败，请求结束");
        return "请求重试失败，请求结束";
      }
      setTimeout(() => {
        request().catch((error) => {
          console.log(error, new Date());
          preRequest();
        });
        time = time ? time * 2 : 1000;
      }, time);
    })();
  }
})();

其他题解