前端js初学者提升前端技能，必须要练的15个项目推荐

前端js初学者提升前端技能，必须要练的15个项目推荐，赶快收藏

成为一名优秀的 Web 开发人员，最快的方法就是练习。一个很好的练习方法是尽可能多地构建初学者项目。那是因为每个项目都会提出一个独特的问题和解决方案，因此您解决的项目越多，您获得的知识就越多。将您完成的每个项目都视为您获得的奖牌。您拥有的奖牌越多，您就越能准备好应对下一个难度更大的项目。

为了帮助您入门，我列出了 15 个初学者 JavaScript 项目。我还在每个项目旁边留下了“在构建之前尝试”部分。每个项目都免费托管在 GitHub Pages 上

1. CSS 渐变生成器

使用这个简单的 CSS 渐变生成器应用程序让网络更漂亮。此应用程序可更改背景颜色，并在屏幕上显示该颜色的十六进制代码，只需单击一个按钮即可。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线地址：https://iamcodefoxx.github.io/Gradient-generator/

使用 JavaScript

DOM操作
数据结构
功能

要点和想法

构建这个项目教会了我如何使用 onclick，它用于将功能附加到按钮。在这种情况下，该函数生成随机的十六进制颜色并使其成为背景颜色。了解这一点非常有用，因为几乎每个现代 Web 应用程序都使用按钮。我有一种感觉，这是一种我会反复使用的技巧。

2、随机名言展现

如果你需要一点动力，我可以满足你。在这个项目中，我们将构建一个配备大量励志名言的随机名言生成器。

在构建之前尝试一下（托管在 GitHub Pages 上）

在线地址：https://iamcodefoxx.github.io/Random-Quote-Generator/

使用 JavaScript

DOM操作
对象
功能

要点和想法

这个应用程序可以通过多种方式创建，但有趣的是看到它是使用字典解决的，字典是一种经常未被充分利用的数据结构。我还学习了一个简单的算法，负责在用户每次单击按钮时生成一个随机报价。

3. 图片轮播

需要一个应用程序来显示您所有的精美图片吗？太棒了，在第三个项目中，我们将创建一个应用程序，允许我们通过单击按钮来浏览图片。在编程中，我们称这些照片轮播或图像滑块。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线地址：https://iamcodefoxx.github.io/ImageCarousel/

使用 JavaScript

DOM操作
控制结构
功能

要点和想法

了解此类项目的实施方式很有趣。起初，我们使用 CSS 来阻止屏幕上的所有图像。然后我们使用 JavaScript 来操纵 CSS 样式，使其一次显示一张图像。在完成这个项目之前，我不确定是否可以直接使用 JavaScript 更改 CSS 样式，事实证明是的。

4.数字时钟

考虑购买数字时钟？不再是了，在此项目中，您将学习如何构建自己的。

在构建之前先尝试一下（托管在 GitHub Pages 上）

在线地址：https://iamcodefoxx.github.io/DigitalClock/

使用 JavaScript

DOM操作
数据结构
功能
对象

要点和想法在构建这个项目时，我了解到使用 JavaScript 我们可以创建一个内置对象并使用内置函数从中检索时间。这很棒，因为它无需包含额外的库，就像我们在 Python 或 C++ 中所做的那样。我还了解了一个名为 setTimeout 的内置函数，它用于一遍又一遍地调用另一个函数。对于这个项目，有必要使用 setTimeout 来确保我们的时间得到正确更新。

5.计算器

计算器。没有它，任何 JavaScript 初学者项目列表都是不完整的，我们在这里也不例外。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线地址：https://iamcodefoxx.github.io/Calculator/

使用 JavaScript

DOM操作
功能

要点和想法

看到构建起来如此简单几乎令人难以置信。在构建这个之前，我认为每个表达式都需要用某种复杂的函数手动解决。事实证明，有一个名为 eval 的内置 JavaScript 函数可以为我们处理这个问题。我真的很喜欢构建这个应用程序，甚至改变了它的风格以赋予它我自己的风格。

6.杂货清单，记账簿

饥饿？让我们用这个购物清单应用程序去杂货店吧。可以更加清晰的记录你每天花销了多少钱，做一个简单的记录吧！

在构建之前先尝试一下（使用 GitHub Pages 托管）

在线源码：https://iamcodefoxx.github.io/Grocery-List/

使用 JavaScript

DOM操作
功能
控制结构
事件监听器

要点和想法这是一个非常酷的应用程序，它是列表中我们使用事件监听器的第一个项目。事实上，我们使用事件监听器在用户单击“回车”键时将新项目添加到杂货清单，并在用户单击特定项目时使用另一个事件监听器从列表中划掉该项目。了解负责删除 div 中所有元素的函数是如何编写的很有用。在本例中，此函数删除了我们杂货清单中的所有项目。

7. 小费计算器

使用此小费计算器，无需再围着桌子看谁在处理小费。在构建之前尝试一下（使用 GitHub Pages 托管）

在线源码：https://iamcodefoxx.github.io/TipCalculator/

使用 JavaScript

DOM操作
功能

要点和想法开发确定每个人给小费金额的函数相当容易。也许这里最大的挑战是使用 CSS 来模仿应用程序的设计。它看起来像一个相当简单的设计，但如果不先看教程，实际上做起来有点挑战。

8.待办事项清单

让我们使用这款出色的待办事项列表应用程序充分利用我们的一天。

在构建它之前尝试它（使用 GitHub Pages 托管）

在线地址：https://iamcodefoxx.github.io/TipCalculator/

使用 JavaScript

DOM操作
事件监听器
控制结构
数据结构
功能

要点和想法

这个解决方案与购物清单应用程序非常相似。我发现自己回头查看那个代码来帮助我解决这个问题。但是，有一点不同，那就是更改列表中每个项目的背景颜色的功能。我认为这是对项目的一个非常好的补充，因为它使它看起来更好。总的来说，我会说这更像是一个审查项目，但它仍然是一个很好的实践。

9. 抽认卡，电子提问便利贴（带本地存储）

这是一个允许您创建抽认卡的应用程序，因此请收起那些纸质抽认卡，因为镇上有一位新老板。

在构建之前尝试一下（使用 GitHub Pages 托管）

源码地址：https://iamcodefoxx.github.io/Flashcards/

使用 JavaScript

DOM操作
功能
控制结构

要点和想法首先是一个多么漂亮的应用程序。它可以帮助学生学习并避免他们花钱购买纸质抽认卡。这是我们使用 flexbox 的列表中的第一个项目，因此一开始并没有什么挑战性。然而，一旦我掌握了它，它实际上非常易于使用，并且使项目更具活力。特别是，我真的很喜欢 align-item、flex-wrap 和 justify-content 选项，因为它们使抽认卡具有响应性。

10.便签

让我们构建一个便利贴应用程序。是的，您现在可以扔掉所有这些便签纸。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线源码：https://iamcodefoxx.github.io/Sticky-Notes/

使用 JavaScript

DOM操作
事件监听器
功能
数据结构

要点和想法构建这个项目的代码与抽认卡项目非常相似，但这没问题，因为需要练习。事实上，如果我没有那个项目的代码可以依靠，我将不得不再次观看抽认卡教程视频以检查我是否正确地完成了这个项目。当然，这个项目确实有一些独特的功能，因此弄清楚如何对这些部分进行编码是一项挑战。总的来说，我从这个项目中学到了很多东西，因为它结合了我们迄今为止所学的一切。

11. 计时器

让我们构建一个计时器。预备，准备，开始！在构建它之前尝试它（使用 GitHub Pages 托管）

源码地址：https://iamcodefoxx.github.io/Timer/

使用 JavaScript

DOM操作
事件监听器
功能
对象

要点和想法事实证明，构建一个简单的计时器比看起来要难。人们会认为使用数字时钟项目中的相同 setInterval 函数就足以显示正确的时间。事实证明，这种技术根本不起作用。对于这个项目，我们创建变量来保存关于时间的不同信息，例如时间开始的时间、时间停止的时间以及时间停止的时间。如果没有这些变量和我们用它们执行的计算，我们的数字时钟将无法正确显示经过的时间。

12. 4 岁儿童学数学

一个很酷的应用程序，可以教孩子们基本的算术运算。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线源码：https://iamcodefoxx.github.io/Math4Kids/

使用 JavaScript

DOM操作
事件监听器
控制结构
数据结构

总结和思考在这个项目中，我学会了如何从一个网页切换到另一个网页以及如何播放声音文件。事实证明，这两项任务都相当简单。最难的部分是弄清楚如何将答案随机放在不同的盒子里，这样正确的答案就不会总是在同一个位置。我尽力自己弄清楚，但最终还是看了解决方案的教程。

13. Unsplash API（图像生成器）

新网站需要一些图片吗？让我们构建一个图像生成器吧。

在构建之前尝试一下（使用 GitHub Pages 托管）

在线地址：https://iamcodefoxx.github.io/UnsplashAPI/

使用 JavaScript

DOM操作
承诺
拿来
功能
控制结构
事件监听器

要点和想法完成这个项目教会了我如何使用 JavaScript 的内置提取来发出 API 请求。在构建这个项目之前，我完全不知道 Unsplash API 的存在。有趣的是，许多老牌公司都将此 API 集成到他们的网站中。每当我的桌面上需要新壁纸时，拥有一个图像生成器也很酷。

14.滚动打字字幕API（打字机）

一个从 API 中获取随机引语并将其显示在具有打字机效果的屏幕上的应用程序。在构建之前尝试一下（使用 GitHub Pages 托管）

在线源码：https://iamcodefoxx.github.io/Typewriter/

使用 JavaScript

DOM操作
事件监听器
控制结构
数据结构
承诺
功能
拿来

要点和想法学习如何编写打字机脚本很棒。我实际上已经在视频游戏中看到了这种效果。现在我可以在构建自己的游戏时使用它。就代码而言，有趣的是了解到我们并不总是需要 CSS 来制作很酷的动画。在这个项目中，我们使用内置的 JavaScript 子字符串函数来制作打字机效果。

15. 方形卡片（模板）

一种显示数据的时尚方式或只是一张方形卡片。在构建之前先试用（托管在 GitHub Pages 上）

在线源码：https://iamcodefoxx.github.io/SquareCards/

使用 JavaScript

事件监听器
功能

收获和想法在这个项目中，我学会了如何直接从 JavaScript 打开 YouTube 视频和网页文章。这是对我作为 Web 开发人员现在拥有的工具库的一个很好的补充（感谢 15 个初学者项目！）。

这 15 个项目是 25 个初学者项目列表的一部分。如果您想查看其余内容，可以关注我，后续会继续给大家分享！如果觉得有用，记得点赞收藏哦！

如果你才开始学习前端，我们这里有html+css阶段完整教程，我们在钉钉群里有全套的课程包含（入门到精通课程、4个综合项目（称之为15天训练营，在群里是从第二十三节课开始的）、30个练习案例！），如果学习有问题，还可以在群里得到老师的答疑，如果需要，可以给我发个消息，邀请你进入钉钉群学习！（全程不涉及任何费用！）长按二维码可以直接加好友即可领取资料！

CSS 还原拉斯维加斯球数字动画 一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：

其中一个核心点就是，我们利用了如下的代码，在一个 DIV 平面内，实现了单个平面下的随机文字随机颜色效果。

效果如下：

其中的 HTML 代码大致如下：

<div class="g-container">
  <div></div>
  // ... 一个 32 个子 div
  <div></div>
</div>

这里为了实现上述效果，其实是用了 32 列，每列是一个 DIV。

emmm，对于追求极致的我们，32 个 DIV 确实不太优雅了。那么，CSS 有没有什么方式，能够单个标签实现多列多格子，每个格子颜色不一致呢？像是这样：

答案当然是可以。本文，我们就将一起来探寻，使用 CSS 如何实现单标签下多色块，及单标签下随机文字随机颜色动画效果。

iCSS前端趣闻

不止于 CSS，不止于前端。关注回复 “css”，入群参与大前端技术讨论，答疑解惑，共同成长进步。

218篇原创内容

公众号

多重背景的威力

思考一下，单个 DIV，我们如何能够实现下述效果呢，譬如一个 DIV 内，有 36 种不同的颜色：

这里的核心，其实就是需要借助多重背景。

正常而言，我们的 DIV 只能有一个 background，设置一种颜色，像是这样：

<div></div>

div {
    width: 300px;
    height: 300px;
    background: #000;
}

效果如下：

但是，合理利用渐变语法的规则，利用多重渐变，我们就可以实现多重背景，我们改造一些上述代码：

div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: 
        linear-gradient(90deg, #000, #000),
        linear-gradient(90deg, #f00, #f00);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 150px 0;
    background-repeat: no-repeat;
}

利用多重背景的能力，我们就得到了黑色和红色两个色块：

我们还可以继续拆分，1 拆 4：

div {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: 
        linear-gradient(90deg, #000, #000),
        linear-gradient(90deg, #0f0, #0f0),
        linear-gradient(90deg, #00f, #00f),
        linear-gradient(90deg, #f00, #f00);
    background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
    background-position: 0 0, 150px 0, 0 150px, 150px 150px;
    background-repeat: no-repeat;
}

效果如下：

它其实是这么个意思，看下面这张图就能很好的理解：

这里我们只标识出了黑色色块和红色色块，另外两个色块的原理也是一样的。

理解了这一点之后，我们要实现如下这个图形就非常轻松了：

当然，这里有个问题，我们手动去写那么多重渐变的代码，工作量是非常之大的，因此，我们可以尝试封装一个 SCSS 函数或者 mixin 帮助我们减轻代码量。

@use "sass:string";


@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@mixin randomLinear($rows: 6, $cols: 8) {
  $bg: null;
  $pos: null;

  $px: 100% / ($cols - 1);
  $py: 100% / ($rows - 1);

  @for $i from 0 through $rows - 1 {
    @for $j from 0 through $cols - 1 {
      @if ($bg) {
        $bg: $bg + string.unquote(",");  
        $pos: $pos + string.unquote(",");  
      }
      $color: randomColor();
      $bg: $bg + linear-gradient(to right, $color, $color);
      $pos: $pos + string.unquote("#{$j * $px} #{$i * $py}");
    }
  }
  background: {
    image: $bg;
    size: (100% / $cols) (100% / $rows);
    repeat: no-repeat;
    position: $pos;
  }
}

@function randomColor() {
    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}

div {
    @include randomLinear(6, 6);
}

这里，我们借助 SCSS 封装了一个 randomLinear 的 mixin，它接收两个参数，分别表示行数和列数，基于上面的 background 拆分，实现了多重渐变，如此一来，我们就能在单个 DIV 下得到这样一个随机的多色块格子图：

审查元素，SCSS 编译后的 CSS 代码其实就是这样的：

好，在此基础上要实现颜色的随机变化也非常简单，我们只需要配合 filter: hue-rotate() 变换即可。

代码如下：

div {
    @include randomLinear(6, 6);
    animation: colorChange 1s infinite steps(10);
}

@keyframes colorChange {
    100% {
        filter: hue-rotate(360deg);
    }
}

这里巧妙的利用了 steps(10)，让整个图形在 1s 内进行 10 次 hue-rotate() 变化。

这里的核心点有两个：

利用 filter: hue-rotate(360deg) 滤镜，能够实现颜色的切换
利用 steps(10) 实现了逐帧动画而不是连续的补间动画

如此一来，我们就能得到如下效果，实现了单个标签内多个不同色块，并且可以实现动画变换：

结合 background-clip: text 实现文字效果

接下来，我们需要实现单个标签下的随机文字、随机颜色的动画效果。也就是下图右边的效果：

有了上面的铺垫，其实整个效果就剩下两步：

利用 background-clip: text 实现从色块到文字的裁剪变化
借助 SCSS 函数及 CSS 变量，实现随机文字的变化

首先，与 CSS 还原拉斯维加斯球数字动画 一文中一样，借助 SCSS 函数，编写一个随机字符的函数，通过元素的伪元素 content 进行设置，并且，我们把背景色，也设置给元素的伪元素：

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);

@function randomChar() {
    $r: random($length);
    @return str-slice($str, $r, $r);
}

@function randomChars($number) {
    $value: '';

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value + randomChar();
        }
    }
    @return $value;
}

div  {
    width: 300px;
    height: 300px;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    font-family: monospace;
    
    &::before {
        content: randomChars(36);
        position: absolute;
        inset: 0;
        @include randomLinear(6, 6);
        color: transparent;
    }
}

这里，有几个细节点再简单讲解一下：

为了让每个字符对齐，我们使用了 font-family: monospace 等宽字符，并且利用 font-size 和 letter-spacing 确保一行只能放下 6 个字符
利用 randomChars SCSS 函数，随机从我们定义的 $str SCSS 字符串变量中取 36 个随机字符
@include randomLinear(6, 6) 就是上面铺垫的随机渐变背景

如此一来，我们就能得到这么一个效果：

此时，我们只需要再给元素的伪元素设置一个 background-clip: text 配合文字颜色 transparent，即可得到色块裁剪到只剩下文字部分的效果：

div  {
    // ...
    
    &::before {
        //...
        color: transparent;
        background-clip: text;
    }
}

效果如下：

好，那如何再让整个文字随机变换起来呢？我们只需提前生成多个不同的随机文字 content，然后进行动画切换即可，像是这样：

div  {
    // ...
    
    &::before {
        content: randomChars(36);
        --content1: "#{randomChars(36)}";
        --content2: "#{randomChars(36)}";
         --content3: "#{randomChars(36)}";
        --content4: "#{randomChars(36)}";
        --content5: "#{randomChars(36)}";
        --content6: "#{randomChars(36)}";
        --content7: "#{randomChars(36)}";
        --content8: "#{randomChars(36)}";
        --content9: "#{randomChars(36)}";
        color: transparent;
        background-clip: text;
        animation: contentChange 1.5s infinite linear;
    }
}
@keyframes contentChange {
    10% {
        content: var(--content1);
    }
    20% {
        content: var(--content2);
    }
    30% {
        content: var(--content3);
    }
    40% {
        content: var(--content4);
    }
    50% {
        content: var(--content5);
    }
    60% {
        content: var(--content6);
    }
    70% {
        content: var(--content7);
    }
    80% {
        content: var(--content8);
    }
    90% {
        content: var(--content9);
    }
}

这样，文字也能随机动起来了（当然，此处其实是伪随机）：

最后，把上面的 hue-rotate 动画重新打开，就能让文字颜色也随机变换！

至此，完整的代码如下：

<div></div>

@use "sass:string";
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu+Mono&display=swap');

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@mixin randomLinear($rows: 6, $cols: 8) {
  $bg: null;
  $pos: null;

  $px: 100% / ($cols - 1);
  $py: 100% / ($rows - 1);

  @for $i from 0 through $rows - 1 {
    @for $j from 0 through $cols - 1 {
      @if ($bg) {
        $bg: $bg + string.unquote(",");  
        $pos: $pos + string.unquote(",");  
      }
      $color: randomColor();
      $bg: $bg + linear-gradient(to right, $color, $color);
      $pos: $pos + string.unquote("#{$j * $px} #{$i * $py}");
    }
  }
  background: {
    image: $bg;
    size: (100% / $cols) (100% / $rows);
    repeat: no-repeat;
    position: $pos;
  }
}

@function randomColor() {
    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}

@function randomChar() {
    $r: random($length);
    @return str-slice($str, $r, $r);
}

@function randomChars($number) {
    $value: '';

    @if $number > 0 {
        @for $i from 1 through $number {
            $value: $value + randomChar();
        }
    }
    @return $value;
}

div {
    width: 300px;
    height: 300px;
    color: #fff;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    animation: colorChange 1.5s infinite steps(10);
    
    &::before {
        --content1: "#{randomChars(36)}";
        --content2: "#{randomChars(36)}";
        --content3: "#{randomChars(36)}";
        --content4: "#{randomChars(36)}";
        --content5: "#{randomChars(36)}";
        --content6: "#{randomChars(36)}";
        --content7: "#{randomChars(36)}";
        --content8: "#{randomChars(36)}";
        --content9: "#{randomChars(36)}";
        content: randomChars(36);
        position: absolute;
        inset: 0;
        color: transparent;
        background-clip: text;
        animation: contentChange 1.5s infinite linear;
    }
}

@keyframes colorChange {
    100% {
        filter: hue-rotate(340deg);
    }
}
@keyframes contentChange {
    10% {
        content: var(--content1);
    }
    20% {
        content: var(--content2);
    }
    30% {
        content: var(--content3);
    }
    40% {
        content: var(--content4);
    }
    50% {
        content: var(--content5);
    }
    60% {
        content: var(--content6);
    }
    70% {
        content: var(--content7);
    }
    80% {
        content: var(--content8);
    }
    90% {
        content: var(--content9);
    }
}

效果如下：

完整的代码，你可以戳这里：CodePen Demo -- Single Div Random Text And Random Color[3]

多色块的其他解决方案？

我们继续扩展延伸一下，本效果的核心还是如何在一个 DIV 下实现多种不同的颜色。

那么，除了上述的技巧，还有其他方式能够在一个 DIV 下实现多种不同颜色吗？

这里，我们还可以利用内联元素的 background 展示特性来实现。

什么意思呢？其实 background 的展示，在 块级元素状态 和 内联元素状态 下的展示规则是不一样的。

表现为 display: inline 内联元素的 background 展现形式与 display: block 块级元素（或者 inline-block、flex、grid）不一致。

简单看个例子：

<p>Lorem .....</p><a>Lorem .....</a>

这里需要注意，<p> 元素是块级元素，而 <a> 是内联元素。

我们给它们统一添加上一个从绿色到蓝色的渐变背景色：

p, a {
  background: linear-gradient(90deg, blue, green);
}

看看效果：

什么意思呢？区别很明显：

块级元素的背景整体是一个渐变整体
内联元素的背景效果是以行为单位进行串连的，每一行都是会有不一样的效果，每行连起来整体组成一个完整的背景效果

基于这一点，我们同样可以实现单个 DIV 下的多重背景。

举个例子：

<div class="g-container">
    <span>ABCDEFGHIJKL</span>
</div>

div {
    width: 300px;
}
span{
    color: #000;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: 25px;
    word-wrap: break-word;
    background: #fc0;
}

此时，我们只设置了一个背景 background: #fc0，效果如下：

基于上面说的技巧，我们改造一下 background: #fc0，拆分成多段渐变背景：

span{
    //...
    background: linear-gradient(
        90deg, 
        #fc0 0 25%, 
        #0f0 0 50%, 
        #00f 0 75%, 
        #f00 0 100%
    );
}

这里，我们每隔 25%，设置了一段不同的颜色，如此一来，整个背景色就变成了 4 块：

基于这个技巧，我们同样可以封装一个 SCSS 函数，用于在单个 DIV 下生成多段色块。代码如下：

@use "sass:string";
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu+Mono&display=swap');

$str: 'QWERTYUIOPASDFGHJKLZXCVBNMabcdefghigklmnopqrstuvwxyz123456789';
$length: str-length($str);


@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
@function randomColor() {
    @return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}
@function randomLinear($count) {
    $value: '';
    
    @for $i from 0 through ($count - 1) {
        $j: $i - 1;
        $value: $value + randomColor() + string.unquote(" #{$j * 50}px #{$i * 50}px,");
    }
    
    @return linear-gradient(90deg, string.unquote(#{$value}) randomColor() 0 100%);
}

span {
    background: randomLinear(36, 50);
}

上面的代码，我们实现了一个 randomLinear($count, $width) 的 SCSS 函数，其中：

$count 表示需要的色块个数
$width 表示每个色块的宽度

如此一来，在一个 300px x 300px 的内联元素内，我们同样可以实现多个不同的随机颜色。利用这个技巧，一样可以实现单个平面下的随机文字随机颜色效果：

剩余的技巧都是相同的，这里就不再赘述，此技巧的完整代码，你可以戳这里：CodePen Demo -- Single Div Random Text And Random Color[4]

最后

本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS[5] ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

参考资料

[1]

CSS 还原拉斯维加斯球数字动画 - 掘金: https://juejin.cn/post/7290968251911356473

[2]

CSS 还原拉斯维加斯球数字动画 - 掘金: https://juejin.cn/post/7290968251911356473

[3]

CodePen Demo -- Single Div Random Text And Random Color: https://codepen.io/Chokcoco/pen/rNPNEWY

[4]

CodePen Demo -- Single Div Random Text And Random Color: https://codepen.io/Chokcoco/pen/bGzbXpv?editors=1100

[5]

Github -- iCSS: https://github.com/chokcoco/iCSS

作者:SbCo

来源:微信公众号:iCSS前端趣闻

出处:https://mp.weixin.qq.com/s/gNhhE7q1hbAmHC_1bk1oHg

function randomStr(num) {
    if(num <=11) {
        return Math.random().toString(32).slice(2, num + 2);
    } else {
        return randomStr(11) + randomStr(num - 11)
    }
}

console.log(30); // 'bilk1crbfegt1og85qlcpojuskolm6kl'

在线咨询

上一篇：基于OpenWrt系统路由器的模式切换与网页设计
下一篇：vue组件的模板分离写法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端js初学者提升前端技能，必须要练的15个项目推荐

1. CSS 渐变生成器

2、随机名言展现

3. 图片轮播

4.数字时钟

5.计算器

6.杂货清单，记账簿

7. 小费计算器

8.待办事项清单

9. 抽认卡，电子提问便利贴（带本地存储）

10.便签

11. 计时器

12. 4 岁儿童学数学

13. Unsplash API（图像生成器）

14.滚动打字字幕API（打字机）

15. 方形卡片（模板）

多重背景的威力

结合 background-clip: text 实现文字效果

多色块的其他解决方案？

最后

参考资料

您的项目需求