玩转FizzBuzz面试题：巧用CSS轻松搞定

2023-12-31 23:29:33

FizzBuzz简介

FizzBuzz是一道经典的面试题，要求应聘者编写一个程序，根据给定的数字，输出以下内容：

如果数字是3的倍数，则输出“Fizz”
如果数字是5的倍数，则输出“Buzz”
如果数字既是3的倍数又是5的倍数，则输出“FizzBuzz”
否则，输出数字本身

用CSS解决FizzBuzz

虽然用编程语言解决FizzBuzz问题很简单，但使用CSS却别有一番风味。CSS是一门用来网页外观的语言，它提供了许多强大的选择器和伪类，可以用来实现各种复杂的效果。

对于FizzBuzz问题，我们可以使用以下CSS代码：

body {
  font-family: Arial, sans-serif;
}

.fizz {
  color: green;
}

.buzz {
  color: blue;
}

.fizzbuzz {
  color: red;
}

在这个代码中，我们首先设置了页面的字体。然后，我们定义了三个类：

.fizz：用于将数字标记为3的倍数，并用绿色显示。
.buzz：用于将数字标记为5的倍数，并用蓝色显示。
.fizzbuzz：用于将数字标记为既是3的倍数又是5的倍数，并用红色显示。

接下来，我们需要使用一个循环来遍历数字。我们可以使用JavaScript或CSS @counter-style 规则来实现这一点。以下是一个使用JavaScript的示例：

for (let i = 1; i <= 100; i++) {
  let output = "";
  if (i % 3 === 0) {
    output += "Fizz";
  }
  if (i % 5 === 0) {
    output += "Buzz";
  }
  if (output === "") {
    output = i;
  }
  document.write(`<span class="${output}">${output}</span>`);
}

在这个代码中，我们使用一个循环遍历数字1到100。对于每个数字，我们检查它是否是3的倍数或5的倍数。如果它是3的倍数，我们就将“Fizz”添加到输出中。如果它是5的倍数，我们就将“Buzz”添加到输出中。如果既不是3的倍数也不是5的倍数，我们就将数字本身添加到输出中。最后，我们使用document.write()函数将输出写入页面。