设置描述文字Style:.desc{font-size:1.5vw;字体粗细：正常；颜色：暗灰色；margin-top:2em;}样式编号:.zeros{font-size:3vw;字体粗细：粗体；保证金-顶部：0.2em;文本对齐：居中；宽度：25.5em；word-wrap:break-word;}给数字上色：.zerosspan{color:var(--c);}轻推数字“1”使其不要太靠近后面的“0”：.zerosspan:nth-child(1){margin-right:0.2em;}至此静态布局完成，接下来使用d3批量处理数字。引入d3库，删除dom中.zeros的number子元素：最后我们将100显示在第0页，每个0有不同的颜色，为了美观，相邻的数字也应该有不同的颜色。因此，首先定义一个获取颜色的函数，可以从谷歌logo配色的4种颜色中取任意一种颜色，并有一个参数表示被排除的颜色。当指定该参数时，会从4个可选颜色中选择颜色中去掉这个颜色，然后从剩下的3个颜色中随机选择一个颜色：functiongetColor(excludedColor){letcolors=newSet(['blue','red','yellow','green'])colors.delete(excludedColor)returnArray.from(colors)[Math.floor(d3.randomUniform(0,colors.size)())]}然后，定义2常量，ZEROS是一个存放100个0的数组，ONE是一个存放数字1的对象，它有2个属性。number表示它的值为1，color表示它的颜色是蓝色：constZEROS=d3.range(100).map(x=>0)constONE={number:1,color:'blue'}接下来，通过遍历使用reduce函数的ZEROS数组，返回一个新数组numbers，它有101个元素（1后跟100个0），每个元素是1个具有数字和颜色属性的对象：letnumbers=ZEROS.reduce(function(numberObjects,d){numberObjects.push({number:d,color:getColor(numberObjects[numberObjects.length-1].color)})returnnumberObjects},[ONE])然后以numbers为数据源，使用d3批量创建dom元素，并在内联样式中写入颜色信息：d3.select('.zeros').selectAll('span').data(numberObjects).enter().append('span').style('--c',(d)=>`var(--${d.color})`).text((d)=>d.number)最后，微调内容的边距整个中心内容：.logo{margin-top:-10vh;}就大功告成了！