怎么用CSS和D3實(shí)現(xiàn)一組彩燈
小編給大家分享一下怎么用CSS和D3實(shí)現(xiàn)一組彩燈，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括漳浦網(wǎng)站建設(shè)、漳浦網(wǎng)站制作、漳浦網(wǎng)頁(yè)制作以及漳浦網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，漳浦網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到漳浦省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
代碼解讀
定義dom，容器中包含9個(gè)元素，代表9個(gè)數(shù)字：
3
1
4
1
5
9
2
6
5
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定義容器尺寸：
.pi{
width:30em;
height:30em;
font-size:12px;
}
把9個(gè)數(shù)字布局成3*3的網(wǎng)格：
.pi{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:0.2em;
}
.pispan{
color:white;
font-size:3em;
background-color:hsl(0,40%,40%);
font-family:sans-serif;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
在dom中定義css變量，變量值等于該元素代表的數(shù)字：
為不同的數(shù)字設(shè)置不同的背景色：
.pispan{
--c:hsl(calc(var(--d)*36),40%,40%);
background-color:var(--c);
}
使數(shù)字的顏色與背景相同，在鼠標(biāo)懸停時(shí)，高度當(dāng)前的數(shù)字：
.pispan{
color:var(--c);
transition:0.3s;
}
.pispan:hover{
background-color:white;
color:black;
box-shadow:001emyellow;
}
至此，完成了視覺效果設(shè)計(jì)，接下來用d3批量處理dom元素和css變量。
引入d3庫(kù)：
刪除掉html文件中代表數(shù)字的dom元素，用d3創(chuàng)建代表數(shù)字的dom元素，并設(shè)置css變量：
constPI='314159265';
d3.select('.pi')
.selectAll('span')
.data(PI)
.enter()
.append('span')
.style('--d',(d)=>d)
.text((d)=>d);
把PI改為100位：
constPI='3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';
同時(shí)把網(wǎng)格改為10*10的布局：
.pi{
grid-template-columns:repeat(10,1fr);
}
.pispan{
font-size:1.3em;
}
接下來制作循環(huán)點(diǎn)亮的效果。
為各數(shù)字元素增加css類，數(shù)字0的類名是d0，數(shù)字1的類名是d2，以此類推：
d3.select('.pi')
.selectAll('span')
.data(PI)
.enter()
.append('span')
.attr('class',(d)=>`d$lxdl5tl`)
.style('--d',(d)=>d)
.text((d)=>d);
定義循環(huán)變量number，它從1開始逐漸遞增：
letnumber=1;
定義一個(gè)函數(shù)，用于點(diǎn)亮特定數(shù)字的一組元素：
functionshow(){
d3.selectAll(`.pispan.d${number%10}`)
.classed('show',true);
d3.selectAll(`.pispan.d${(number-1)%10}`)
.classed('show',false);
number++;
}
最后，設(shè)置一個(gè)間隔時(shí)間，不斷重復(fù)調(diào)用上面這個(gè)函數(shù)，讓各組數(shù)字依次點(diǎn)亮：
setInterval(show,500);
以上是“怎么用CSS和D3實(shí)現(xiàn)一組彩燈”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：怎么用CSS和D3實(shí)現(xiàn)一組彩燈
本文網(wǎng)址：http://m.jiaotiyi.com/article/gjgsse.html