前端日常实践：115#视频演示如何使用CSS和D3制作一组π数字灯笼
时间：2023-04-05 23:25:27
HTML5
效果预览点击右侧“点击预览”按钮在当前页面进行预览，点击链接全屏预览。https://codepen.io/comehop??e/pen/XPbeKp互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c79DRc4源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom，容器包含9个元素，代表9个数字：314159265
居中显示:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器大小:.pi{width:30em;高度：30em；font-size:12px;}将9个数字排列成一个3*3的网格：.pi{display:grid;网格模板列：重复（3、1fr）；grid-gap:0.2em;}.pispan{颜色:白色;字体大小：3em；背景色：hsl(0,40%,40%)；字体系列：无衬线；边界半径：50%；显示：弹性；;正义fy-内容：居中；user-select:none;}在dom中定义css变量，变量值等于元素代表的数：
314159265 不同的数字设置不同的数字background-color:.pispan{--c:hsl(calc(var(--d)*36),40%,40%);background-color:var(--c);}使数字的颜色匹配相同的背景，在悬停时，高度当前数字：.pispan{color:var(--c);transition:0.3s;}.pispan:hover{background-color:white;颜色：黑色;box-shadow:001emyellow;}至此视觉效果设计完成，接下来使用d3批量处理dom元素和css变量引入d3库：删除html文件中代表数字的dom元素，使用d3创建dom元素表示数字，并设置css变量：constPI='314159265';d3.select('.pi').selectAll('span').data(PI).enter().append('span')。style('--d',(d)=>d).text((d)=>d);把PI改为100位：constPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';同时把网格改为10*10的布局：.pi{grid-template-columns:repeat(10,1fr);}.pispan{font-size:1.3em;}接下来做一个圆形的灯效。为每个数字元素添加css类，数字0的类名是d0，数字1的类名是d2，依此类推：d3.select('.pi').selectAll('span').data(PI)。enter().append('span').attr('class',(d)=>`d${d}`).style('--d',(d)=>d).text((d)=>d);定义循环变量number，从1开始逐渐增加：letnumber=1;定义一个函数来点亮一组具有特定编号的元素：functionshow(){d3.selectAll(`.pispan.d${number%10}`).classed('show',true);d3.selectAll(`.pispan.d${(number-1)%10}`).classed('show',false);number++;}最后设置一个间隔时间，重复调用上面的函数，让每组数字依次点亮：setInterval(show,500);你完成了！
