前端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 實現文字效果

多色塊的其他解決方案？

最后

參考資料

您的項目需求