摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。引入庫(kù)，并刪除掉中的數(shù)字子元素最終我們會(huì)在頁(yè)面上顯示個(gè)，每個(gè)的顏色都不同，并且為了美觀，相鄰數(shù)字的顏色也要不同。

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/xaPZye

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cwkpGf9

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

定義 dom，只有 1 個(gè)空元素，其中不包含任何文本：

引入字體文件，Product Sans 是 Google 專門為品牌推廣創(chuàng)建的無襯線字體：

@import url("https://fonts.googleapis.com/css?family=Product+Sans");

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

用偽元素制作 logo，注意 content 的內(nèi)容不是 "Google"，而是 "google_logo"：

.logo::before {
    content: "google_logo";
    font-size: 10vw;
}

設(shè)置字體，采用剛才引入的在線字體，剛才頁(yè)面上的 "google_logo" 文字被替換成了單色的 logo 圖案：

body {
    font-family: "product sans";
}

定義顏色變量：

:root {
    --blue: #4285f4;
    --red: #ea4335;
    --yellow: #fbbc05;
    --green: #34a853;
}

設(shè)置文字遮罩效果，為文字上色：

.logo::before {
    background-image: linear-gradient(
        to right,
        var(--blue) 0%, var(--blue) 26.5%, 
        var(--red) 26.5%, var(--red) 43.5%, 
        var(--yellow) 43.5%, var(--yellow) 61.5%,
        var(--blue) 61.5%, var(--blue) 78.5%, 
        var(--green) 78.5%, var(--green) 84.5%, 
        var(--red) 84.5%, var(--red) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

至此，Google logo 制作完成，接下來制作 googol 信息，說明 Google 的名字來源于含義是 1 后面跟 100 個(gè)零的大數(shù)的單詞 googol。

在 dom 中添加一行說明文本和容納數(shù)字的容器，容器中包含 5 個(gè)數(shù)字，在每個(gè)數(shù)字的內(nèi)聯(lián)樣式中指定了顏色變量：

The name of Google originated from a misspelling of the word "googol", the number 1 followed by 100 zeros.
 

    1
    0
    0
    0
    0

設(shè)置說明文本的樣式：

.desc {
    font-size: 1.5vw;
    font-weight: normal;
    color: dimgray;
    margin-top: 2em;
}

設(shè)置數(shù)字的樣式：

.zeros {
    font-size: 3vw;
    font-weight: bold;
    margin-top: 0.2em;
    text-align: center;
    width: 25.5em;
    word-wrap: break-word;
}

為數(shù)字上色：

.zeros span {
    color: var(--c);
}

微調(diào)數(shù)字 "1" 的邊距，讓它不要和后面的 "0" 靠得太緊：

.zeros span:nth-child(1) {
    margin-right: 0.2em;
}

至此，靜態(tài)布局完成，接下來用 d3 批量處理數(shù)字。

引入 d3 庫(kù)，并刪除掉 dom 中 .zeros 的數(shù)字子元素：

最終我們會(huì)在頁(yè)面上顯示 100 個(gè) 0，每個(gè) 0 的顏色都不同，并且為了美觀，相鄰數(shù)字的顏色也要不同。
所以，先定義一個(gè)獲取顏色的函數(shù)，它可以從 Google logo 配色的 4 種顏色中取任意一個(gè)顏色，并且有一個(gè)表示被排除顏色的參數(shù)，當(dāng)指定的此參數(shù)時(shí)，就從 4 個(gè)可選的顏色中去掉這個(gè)顏色，然后從剩下的 3 個(gè)顏色中隨機(jī)取一個(gè)顏色：

function getColor(excludedColor) {
    let colors = new Set(["blue", "red", "yellow", "green"])
    colors.delete(excludedColor)
    return Array.from(colors)[Math.floor(d3.randomUniform(0, colors.size)())]
}

然后，定義 2 個(gè)常量，ZEROS 是存儲(chǔ) 100 個(gè) 0 的數(shù)組，ONE 是存儲(chǔ)數(shù)字 1 的對(duì)象，它有 2 個(gè)屬性，number 表示它的數(shù)值是 1，color 表示它的顏色是藍(lán)色：

const ZEROS = d3.range(100).map(x=>0)
const ONE = {number: 1, color: "blue"}

接下來，通過用 reduce 函數(shù)遍歷 ZEROS 數(shù)組，返回一個(gè)新的數(shù)組 numbers，它有 101 個(gè)元素（1 以及跟隨它的 100 個(gè) 0），每個(gè)元素都是 1 個(gè)包含 number 和 color 屬性的對(duì)象：

let numbers = ZEROS.reduce(function (numberObjects, d) {
    numberObjects.push({
        number: d,
        color: getColor(numberObjects[numberObjects.length - 1].color)
    })
    return numberObjects
}, [ONE])

然后，以 numbers 為數(shù)據(jù)源，用 d3 批量創(chuàng)建出 dom 元素，并且把顏色信息寫在行內(nèi)樣式中：

d3.select(".zeros")
    .selectAll("span")
    .data(numberObjects)
    .enter()
    .append("span")
    .style("--c", (d)=>`var(--${d.color})`)
    .text((d)=>d.number)

最后，微調(diào)一下內(nèi)容的邊距，使整個(gè)內(nèi)容居中：

.logo {
    margin-top: -10vh;
}

大功告成！