文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用CSS和D3实现一组彩灯

2024-04-02 19:55

关注

小编给大家分享一下怎么用CSS和D3实现一组彩灯,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  代码解读

  定义dom,容器中包含9个元素,代表9个数字:

  <divclass="pi">

  <span>3</span>

  <span>1</span>

  <span>4</span>

  <span>1</span>

  <span>5</span>

  <span>9</span>

  <span>2</span>

  <span>6</span>

  <span>5</span>

  </div>

  居中显示:

  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个数字布局成3*3的网格:

  .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变量,变量值等于该元素代表的数字:

  <pclass="pi">

  <spanstyle="--d:3">3</span>

  <spanstyle="--d:1">1</span>

  <spanstyle="--d:4">4</span>

  <spanstyle="--d:1">1</span>

  <spanstyle="--d:5">5</span>

  <spanstyle="--d:9">9</span>

  <spanstyle="--d:2">2</span>

  <spanstyle="--d:6">6</span>

  <spanstyle="--d:5">5</span>

  </p>

  为不同的数字设置不同的背景色:

  .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;

  color:black;

  box-shadow:001emyellow;

  }

  至此,完成了视觉效果设计,接下来用d3批量处理dom元素和css变量。

  引入d3库:

  <scriptsrc="https://d3js.org/d3.v5.min.js"></script>

  删除掉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);



怎么用CSS和D3实现一组彩灯

以上是“怎么用CSS和D3实现一组彩灯”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯