DD每周前端七题详解-第一期

2023-10-06 14:23:01

提升前端功力的神器：「DD每周七题」带你巩固基础

导读

作为一名前端开发者，巩固基础至关重要。本博客将介绍「DD每周七题」，一个系列练习，旨在帮助你提升 JavaScript、HTML 和 CSS 技能。

1. JavaScript

1.1 找出数组中出现次数最多的元素

想象你有一堆糖果，你想知道哪种糖果出现得最多。JavaScript 中，你可以使用一个对象来存储元素及其出现次数，然后找出出现次数最多的那个。

const candyCounts = {
  "红色": 3,
  "绿色": 5,
  "蓝色": 2,
};

let mostFrequentCandy;
let maxCount = 0;
for (const candy in candyCounts) {
  if (candyCounts[candy] > maxCount) {
    mostFrequentCandy = candy;
    maxCount = candyCounts[candy];
  }
}

console.log(`出现次数最多的糖果是：${mostFrequentCandy}`); // 输出：绿色

1.2 找出字符串中最长的回文子串

想象你有一串珍珠，你想找到最长的对称部分。JavaScript 中，你可以使用滑动窗口和扩展的方法来做到这一点。

const str = "abbaabb";

let longestPalindrome = "";
for (let i = 0; i < str.length; i++) {
  for (let j = i + 1; j <= str.length; j++) {
    const substring = str.substring(i, j);
    if (isPalindrome(substring) && substring.length > longestPalindrome.length) {
      longestPalindrome = substring;
    }
  }
}

function isPalindrome(str) {
  return str === str.split("").reverse().join("");
}

console.log(`最长的回文子串是：${longestPalindrome}`); // 输出：abba

1.3 找出二叉树中最大的二叉搜索子树

想象你有一棵大树，你想找到其中最大的部分，而这个部分符合二叉搜索树的性质。JavaScript 中，你可以使用递归和动态规划来解决这个问题。

class Node {
  constructor(val, left, right) {
    this.val = val;
    this.left = left;
    this.right = right;
  }
}

function findLargestBinarySearchTree(root) {
  if (!root) return null;

  const result = {
    largestBST: null,
    min: Infinity,
    max: -Infinity,
    isBST: true,
  };

  const leftResult = findLargestBinarySearchTree(root.left);
  const rightResult = findLargestBinarySearchTree(root.right);

  if (leftResult.isBST && rightResult.isBST && root.val > leftResult.max && root.val < rightResult.min) {
    result.isBST = true;
    result.min = Math.min(root.val, leftResult.min);
    result.max = Math.max(root.val, rightResult.max);
    result.largestBST = root;
  } else {
    result.isBST = false;
    result.largestBST = leftResult.largestBST ? leftResult.largestBST : rightResult.largestBST;
  }

  return result;
}

2. HTML

2.1 创建一个包含姓名、年龄和性别信息的表格

想象你有一群朋友的信息，你想以表格的形式显示出来。HTML 中，你可以使用 <table> 元素来创建表格，并使用 <thead> 和 <tbody> 元素来表示表头和表体。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

2.2 创建一个包含文本输入框、密码输入框和提交按钮的表单

想象你正在创建一个登录页面，你想让用户输入他们的用户名和密码。HTML 中，你可以使用 <form> 元素来创建表单，并使用 <input> 元素来创建文本输入框和密码输入框。

<form>
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="submit" value="登录">
</form>

3. CSS

3.1 创建一个红色的、带有边框的、居中的按钮

想象你正在设计一个网站，你想创建一个醒目的按钮。CSS 中，你可以使用 background-color、border 和 margin 属性来设置按钮的样式和位置。

button {
  background-color: red;
  border: 1px solid black;
  padding: 10px 20px;
  margin: 0 auto;
  display: block;
}

3.2 创建一个在鼠标悬停时颜色变为蓝色的、带有阴影的、圆角的文本框

想象你正在创建一个网站，你想让用户输入信息。CSS 中，你可以使用 box-shadow、border-radius 和 hover 伪类来创建具有交互效果的文本框。

input[type="text"] {
  background-color: white;
  border: 1px solid black;
  padding: 10px 20px;
  margin: 0 auto;
  display: block;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

input[type="text"]:hover {
  background-color: blue;
}