Vue3简单实现元素周期表

已于 2022-08-26 10:28:58 修改
阅读量458 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2022-08-25 10:08:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44326492/article/details/126518674
版权

浏览器上效果：元素周期表

布局思路如下

  • 根据族来划分元素，纵向排列各族内元素，然后在横向上排列各个族
<div class="wrapper">
      <div class="e-con">
        <div class="period-index">
          <div class="pi-des des-bg"></div>
          <div class="pi-con fdisxy" v-for="index in 7">{{index}}</div>
        </div>
        <div class="elements fdisc" v-for="clans,key in tableData" :class="[key=='VIIIa'?'special-width':'']">
          <div class="des-bg des-a fdisc" v-if="key=='IA'">
            <div class="clans-name">I<span class="text-red">A</span></div>
            <div class="r-text">1</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='IIA'">
            <div>II<span class="text-red">A</span></div>
            <div class="r-text">2</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IIIB'">
            <div>III<span class="text-red">B</span></div>
            <div class="r-text">3</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IVB'">
            <div>IV<span class="text-red">B</span></div>
            <div class="r-text">4</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VB'">
            <div>V<span class="text-red">B</span></div>
            <div class="r-text">5</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VIB'">
            <div>VI<span class="text-red">B</span></div>
            <div class="r-text">6</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='VIIB'">
            <div>VII<span class="text-red">B</span></div>
            <div class="r-text">7</div>
          </div>
          <div class="des-bg des-d fdisr" v-else-if="key=='VIIIa'" v-once>
            <div class="index-head">VIII</div>
            <div class="i-text">8</div>
            <div class="i-text">9</div>
            <div class="i-text">10</div>
          </div>
          <div v-else-if="key=='VIIIb'"></div>
          <div v-else-if="key=='VIIIc'"></div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IB'">
            <div>I<span class="text-red">B</span></div>
            <div class="r-text">11</div>
          </div>
          <div class="des-bg des-c fdisc" v-else-if="key=='IIB'">
            <div>II<span class="text-red">B</span></div>
            <div class="r-text">12</div>
          </div>
          <div class="des-bg des-b fdisc bdl-normal" v-else-if="key=='IIIA'">
            <div>III<span class="text-red">A</span></div>
            <div class="r-text">13</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='IVA'">
            <div>IV<span class="text-red">A</span></div>
            <div class="r-text">14</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='VA'">
            <div>V<span class="text-red">A</span></div>
            <div class="r-text">15</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='VIA'">
            <div>VI<span class="text-red">A</span></div>
            <div class="r-text">16</div>
          </div>
          <div class="des-bg des-b fdisc" v-else-if="key=='VIIA'">
            <div>VII<span class="text-red">A</span></div>
            <div class="r-text">17</div>
          </div>
          <div class="des-bg des-a fdisc bdl-normal" v-else-if="key=='ZERO'">
            <div>0</div>
            <div class="r-text">18</div>
          </div>
          <div class="element-con fdisc" v-for="element in clans" :class="[element.metallic?'elc-metal-bg':'elc-nometal-bg',key=='IIIB'?'bdl-red':'',key=='IIB'?'bdr-red':'', checkExcessive(key)?'excessive':'',element.blank?'blank-con':'',borderFix(element.index)?'bdl-normal':'']">
            <div class="ec-a-s fdisc" v-if="element.index=='57~71'||element.index=='89~103'">
              <div class="e-index-s">{{element.index}}</div>
              <div class="e-symbol-s" :class="[element.index=='89~103'?'text-red':'']">{{element.chemicalymbol}}</div>
            </div>
            <div class="ec-a fdisr" v-else>
              <div class="e-index">{{element.index}}</div>
              <div class="e-symbol" :class="[element.radioactivity?'text-red':'']">{{element.chemicalymbol}}</div>
            </div>

            <div class="ec-b">
              {{element.chemicalName}}
            </div>
            <div class="ec-c" v-html="element.valenceElectron">

            </div>
            <div class="ec-d">
              {{element.relativeAtomicMass}}
            </div>
          </div>

        </div>
        <div class="electronic-con fdisc">
          <div class="des-e fdisxy">电子层</div>
          <div class="ecs fdisc" v-for="(symbol,index) in electronics">
            <div class="ec-item" v-for="(eleCut,cindex) in cutElectronics(index)">{{eleCut}}</div>
          </div>
        </div>
        <div class="electronic-con fdisc">
          <div class="des-e fdisxy">0族电子数</div>
          <div class="ecs fdisc" v-for="(symbol,index) in electronicsNum">
            <div class="ec-item" v-for="(eleCut,cindex) in cutElectronicsNum(index)">{{eleCut}}</div>
          </div>
        </div>
      </div>

      <div class="extra-con fdisr" style="margin-top: 50px;">
        <div class="period-index">
          <div class="extra-pi-con fdisxy">镧系</div>
        </div>
        <div class="extra-element-con fdisc" v-for="element in LaSeries" :class="[element.metallic?'elc-metal-bg':'elc-nometal-bg',]">
          <div class="ec-a-s fdisc" v-if="element.index=='57~71'||element.index=='89~103'">
            <div class="e-index-s">{{element.index}}</div>
            <div class="e-symbol-s" :class="[element.index=='89~103'?'text-red':'']">{{element.chemicalymbol}}</div>
          </div>
          <div class="ec-a fdisr" v-else>
            <div class="e-index">{{element.index}}</div>
            <div class="e-symbol" :class="[element.radioactivity?'text-red':'']">{{element.chemicalymbol}}</div>
          </div>

          <div class="ec-b">
            {{element.chemicalName}}
          </div>
          <div class="ec-c" v-html="element.valenceElectron">

          </div>
          <div class="ec-d">
            {{element.relativeAtomicMass}}
          </div>
        </div>
      </div>

      <div class="extra-con fdisr" style="margin-top: 10px;">
        <div class="period-index">
          <div class="extra-pi-con fdisxy">锕系</div>
        </div>
        <div class="extra-element-con fdisc" v-for="element in AcSeries" :class="[element.metallic?'elc-metal-bg':'elc-nometal-bg',]">
          <div class="ec-a-s fdisc" v-if="element.index=='57~71'||element.index=='89~103'">
            <div class="e-index-s">{{element.index}}</div>
            <div class="e-symbol-s" :class="[element.index=='89~103'?'text-red':'']">{{element.chemicalymbol}}</div>
          </div>
          <div class="ec-a fdisr" v-else>
            <div class="e-index">{{element.index}}</div>
            <div class="e-symbol" :class="[element.radioactivity?'text-red':'']">{{element.chemicalymbol}}</div>
          </div>

          <div class="ec-b">
            {{element.chemicalName}}
          </div>
          <div class="ec-c" v-html="element.valenceElectron">

          </div>
          <div class="ec-d">
            {{element.relativeAtomicMass}}
          </div>
        </div>
      </div>
    </div>
  </header>
  • js逻辑处理如下
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import { reactive, ref } from "vue";
// let electronics = ref(["K","L","M","N","O","P"])
let electronics = ref(["P", "O", "N", "M", "L", "K"]);
let electronicsNum = ref([8, 18, 32, 18, 8, 2]);
let LaSeries = ref([
  {
    index: 57,
    chemicalymbol: "La",
    chemicalName: "镧",
    valenceElectron: "5d<sup>1</sup>6s<sup>2</sup>",
    relativeAtomicMass: 138.9,
    metallic: true,
    radioactivity: false,
  },
 
]);

let AcSeries = ref([
  {
    index: 89,
    chemicalymbol: "Ac",
    chemicalName: "锕",
    valenceElectron: "6d<sup>1</sup>7s<sup>2</sup>",
    relativeAtomicMass: "〔227〕",
    metallic: true,
    radioactivity: true,
  },
  
]);

let tableData = ref({
  IA: [
    {
      index: 1,
      chemicalymbol: "H",
      chemicalName: "氢",
      valenceElectron: "1s<sup>1</sup>",
      relativeAtomicMass: 1.008,
      metallic: false,
    },
    {
      index: 3,
      chemicalymbol: "Li",
      chemicalName: "锂",
      valenceElectron: "2s<sup>1</sup>",
      relativeAtomicMass: 6.941,
      metallic: true,
    },
    {
      index: 11,
      chemicalymbol: "Na",
      chemicalName: "钠",
      valenceElectron: "3s<sup>1</sup>",
      relativeAtomicMass: 22.99,
      metallic: true,
    },
    {
      index: 19,
      chemicalymbol: "K",
      chemicalName: "钾",
      valenceElectron: "4s<sup>1</sup>",
      relativeAtomicMass: 39.1,
      metallic: true,
    },
    {
      index: 37,
      chemicalymbol: "Rb",
      chemicalName: "铷",
      valenceElectron: "5s<sup>1</sup>",
      relativeAtomicMass: 85.47,
      metallic: true,
    },
    {
      index: 55,
      chemicalymbol: "Cs",
      chemicalName: "铯",
      valenceElectron: "6s<sup>1</sup>",
      relativeAtomicMass: 132.9,
      metallic: true,
    },
    {
      index: 87,
      chemicalymbol: "Fr",
      chemicalName: "钫",
      valenceElectron: "7s<sup>1</sup>",
      relativeAtomicMass: "〔223〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  IIA: [
    {
      index: 4,
      chemicalymbol: "Be",
      chemicalName: "铍",
      valenceElectron: "2s<sup>2</sup>",
      relativeAtomicMass: 9.012,
      metallic: true,
    },
    {
      index: 12,
      chemicalymbol: "Mg",
      chemicalName: "镁",
      valenceElectron: "3s<sup>2</sup>",
      relativeAtomicMass: 24.31,
      metallic: true,
    },
    {
      index: 20,
      chemicalymbol: "Ca",
      chemicalName: "钙",
      valenceElectron: "4s<sup>2</sup>",
      relativeAtomicMass: 40.08,
      metallic: true,
    },
    {
      index: 38,
      chemicalymbol: "Sr",
      chemicalName: "锶",
      valenceElectron: "5s<sup>2</sup>",
      relativeAtomicMass: 87.62,
      metallic: true,
    },
    {
      index: 56,
      chemicalymbol: "Ba",
      chemicalName: "钡",
      valenceElectron: "6s<sup>2</sup>",
      relativeAtomicMass: 137.3,
      metallic: true,
    },
    {
      index: 88,
      chemicalymbol: "Ra",
      chemicalName: "镭",
      valenceElectron: "7s<sup>2</sup>",
      relativeAtomicMass: "〔226〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  IIIB: [
    {
      index: 21,
      chemicalymbol: "Sc",
      chemicalName: "钪",
      valenceElectron: "3d<sup>1</sup>4s<sup>2</sup>",
      relativeAtomicMass: 44.96,
      metallic: true,
    },
    {
      index: 39,
      chemicalymbol: "Y",
      chemicalName: "钇",
      valenceElectron: "4d<sup>1</sup>5s<sup>2</sup>",
      relativeAtomicMass: 88.91,
      metallic: true,
    },
    {
      index: "57~71",
      chemicalymbol: "La~Lu",
      chemicalName: "镧系",
      valenceElectron: "",
      relativeAtomicMass: "",
      metallic: true,
    },
    {
      index: "89~103",
      chemicalymbol: "Ac~Lr",
      chemicalName: "锕系",
      valenceElectron: "",
      relativeAtomicMass: "",
      metallic: true,
    },
  ],
  IVB: [
    {
      index: 22,
      chemicalymbol: "Ti",
      chemicalName: "钛",
      valenceElectron: "3d<sup>2</sup>4s<sup>2</sup>",
      relativeAtomicMass: 44.96,
      metallic: true,
    },
    {
      index: 39,
      chemicalymbol: "Zr",
      chemicalName: "锆",
      valenceElectron: "4d<sup>2</sup>5s<sup>2</sup>",
      relativeAtomicMass: 91.22,
      metallic: true,
    },
    {
      index: 72,
      chemicalymbol: "Hf",
      chemicalName: "铪",
      valenceElectron: "5d<sup>2</sup>6s<sup>2</sup>",
      relativeAtomicMass: 178.5,
      metallic: true,
    },
    {
      index: 104,
      chemicalymbol: "Rf",
      chemicalName: "钅卢*",
      valenceElectron: "6d<sup>2</sup>7s<sup>2</sup>",
      relativeAtomicMass: "〔261〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  VB: [
    {
      index: 23,
      chemicalymbol: "V",
      chemicalName: "钒",
      valenceElectron: "3d<sup>3</sup>4s<sup>2</sup>",
      relativeAtomicMass: 50.94,
      metallic: true,
    },
    {
      index: 41,
      chemicalymbol: "Nb",
      chemicalName: "铌",
      valenceElectron: "4d<sup>4</sup>5s<sup>1</sup>",
      relativeAtomicMass: 92.91,
      metallic: true,
    },
    {
      index: 73,
      chemicalymbol: "Ta",
      chemicalName: "钽",
      valenceElectron: "5d<sup>3</sup>6s<sup>2</sup>",
      relativeAtomicMass: 180.9,
      metallic: true,
    },
    {
      index: 105,
      chemicalymbol: "Db",
      chemicalName: "钅杜*",
      valenceElectron: "6d<sup>3</sup>7s<sup>2</sup>",
      relativeAtomicMass: "〔262〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  VIB: [
    {
      index: 24,
      chemicalymbol: "Cr",
      chemicalName: "铬",
      valenceElectron: "3d<sup>5</sup>4s<sup>1</sup>",
      relativeAtomicMass: 52.0,
      metallic: true,
    },
    {
      index: 42,
      chemicalymbol: "Mo",
      chemicalName: "钼",
      valenceElectron: "4d<sup>5</sup>5s<sup>1</sup>",
      relativeAtomicMass: 95.94,
      metallic: true,
    },
    {
      index: 74,
      chemicalymbol: "W",
      chemicalName: "钨",
      valenceElectron: "5d<sup>4</sup>6s<sup>2</sup>",
      relativeAtomicMass: 183.8,
      metallic: true,
    },
    {
      index: 106,
      chemicalymbol: "Sg",
      chemicalName: "钅喜*",
      valenceElectron: "  ",
      relativeAtomicMass: "〔266〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  VIIB: [
    {
      index: 25,
      chemicalymbol: "Mn",
      chemicalName: "锰",
      valenceElectron: "3d<sup>5</sup>4s<sup>2</sup>",
      relativeAtomicMass: 54.94,
      metallic: true,
    },
    {
      index: 43,
      chemicalymbol: "Tc",
      chemicalName: "锝",
      valenceElectron: "4d<sup>5</sup>5s<sup>2</sup>",
      relativeAtomicMass: "〔98〕",
      metallic: true,
      radioactivity: true,
    },
    {
      index: 75,
      chemicalymbol: "Re",
      chemicalName: "铼",
      valenceElectron: "5d<sup>5</sup>6s<sup>2</sup>",
      relativeAtomicMass: 186.2,
      metallic: true,
    },
    {
      index: 107,
      chemicalymbol: "Bh",
      chemicalName: "钅波*",
      valenceElectron: "  ",
      relativeAtomicMass: "〔264〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  
  
  
  IB: [
    {
      index: 29,
      chemicalymbol: "Cu",
      chemicalName: "铜",
      valenceElectron: "3d<sup>10</sup>4s<sup>1</sup>",
      relativeAtomicMass: 63.55,
      metallic: true,
    },
    {
      index: 47,
      chemicalymbol: "Ag",
      chemicalName: "银",
      valenceElectron: "4d<sup>10</sup>5s<sup>1</sup>",
      relativeAtomicMass: "107.9",
      metallic: true,
      radioactivity: false,
    },
    {
      index: 79,
      chemicalymbol: "Au",
      chemicalName: "金",
      valenceElectron: "5d<sup>10</sup>6s<sup>1</sup>",
      relativeAtomicMass: 197.0,
      metallic: true,
    },
    {
      index: 111,
      chemicalymbol: "Rg",
      chemicalName: "钅仑*",
      valenceElectron: "  ",
      relativeAtomicMass: "〔272〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  IIB: [
    {
      index: 30,
      chemicalymbol: "Zn",
      chemicalName: "锌",
      valenceElectron: "3d<sup>10</sup>4s<sup>2</sup>",
      relativeAtomicMass: 65.41,
      metallic: true,
    },
    {
      index: 48,
      chemicalymbol: "Cd",
      chemicalName: "铬",
      valenceElectron: "4d<sup>10</sup>5s<sup>2</sup>",
      relativeAtomicMass: 112.4,
      metallic: true,
      radioactivity: false,
    },
    {
      index: 80,
      chemicalymbol: "Hg",
      chemicalName: "汞",
      valenceElectron: "5d<sup>10</sup>6s<sup>2</sup>",
      relativeAtomicMass: 200.6,
      metallic: true,
    },
    {
      index: 112,
      chemicalymbol: "Uub",
      chemicalName: "*",
      valenceElectron: "  ",
      relativeAtomicMass: "〔285〕",
      metallic: true,
      radioactivity: true,
    },
  ],
  IIIA: [
    {
      index: 5,
      chemicalymbol: "B",
      chemicalName: "硼",
      valenceElectron: "2s<sup>2</sup>2p<sup>1</sup>",
      relativeAtomicMass: 10.81,
      metallic: false,
    },
    {
      index: 13,
      chemicalymbol: "Al",
      chemicalName: "铝",
      valenceElectron: "3s<sup>2</sup>3p<sup>1</sup>",
      relativeAtomicMass: 26.98,
      metallic: true,
    },
    {
      index: 31,
      chemicalymbol: "Ga",
      chemicalName: "镓",
      valenceElectron: "4s<sup>2</sup>4p<sup>1</sup>",
      relativeAtomicMass: 69.72,
      metallic: true,
    },
    {
      index: 49,
      chemicalymbol: "In",
      chemicalName: "铟",
      valenceElectron: "5s<sup>2</sup>5p<sup>1</sup>",
      relativeAtomicMass: 114.8,
      metallic: true,
    },
    {
      index: 81,
      chemicalymbol: "Ti",
      chemicalName: "铊",
      valenceElectron: "6s<sup>2</sup>6p<sup>1</sup>",
      relativeAtomicMass: 114.8,
      metallic: true,
    },
    {
      blank: true,
    },
  ],
  
 
  ZERO: [
    {
      index: 2,
      chemicalymbol: "He",
      chemicalName: "氦",
      valenceElectron: "1s<sup>2",
      relativeAtomicMass: 4.003,
      metallic: false,
    },
    {
      index: 10,
      chemicalymbol: "Ne",
      chemicalName: "氖",
      valenceElectron: "2s<sup>2</sup>2p<sup>6</sup>",
      relativeAtomicMass: 21.18,
      metallic: false,
    },
    {
      index: 18,
      chemicalymbol: "Ar",
      chemicalName: "氩",
      valenceElectron: "3s<sup>2</sup>3p<sup>6</sup>",
      relativeAtomicMass: 39.95,
      metallic: false,
    },
    {
      index: 36,
      chemicalymbol: "Kr",
      chemicalName: "氪",
      valenceElectron: "4s<sup>2</sup>4p<sup>6</sup>",
      relativeAtomicMass: 83.8,
      metallic: false,
    },
    {
      index: 54,
      chemicalymbol: "Xe",
      chemicalName: "氙",
      valenceElectron: "5s<sup>2</sup>5p<sup>6</sup>",
      relativeAtomicMass: 131.3,
      metallic: false,
      radioactivity: false,
    },
    {
      index: 86,
      chemicalymbol: "Rn",
      chemicalName: "氡",
      valenceElectron: "6s<sup>2</sup>6p<sup>6</sup>",
      relativeAtomicMass: "〔222〕",
      metallic: false,
      radioactivity: true,
    },
    {
      blank: true,
    },
  ],
});

function checkExcessive(key) {
  return [
    "IIIB",
    "IVB",
    "VB",
    "VIB",
    "VIIB",
    "VIIIa",
    "VIIIb",
    "VIIIc",
    "IB",
    "IIB",
  ].includes(key);
}

function borderFix(key) {
  return [2, 5, 13].includes(key);
}

function cutElectronics(index) {
  return electronics.value.slice(5 - index);
}
function cutElectronicsNum(index) {
  return electronicsNum.value.slice(5 - index);
}
</script>

Vue代码链接

Jimsare
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于three.js超级炫酷的元素周期表和中国地图（html版本和vue版本）
allen_csdns的博客
03-24 1918
一、元素周期表 演示地址：https://demo.demohuo.top/jquery/10/1035/demo/ 效果图： 二、中国地图 效果图： 如果要使用在vue项目里，并且全屏显示 则需要通过iframe标签将源码引入即可 <template> <div style="margin:0px;padding:0px;overflow:hidden"> &...
vue实现元素周期表，附赠元素周期表静态数据
weixin_47756693的博客
01-11 738
vue实现元素周期表，已经封装成组件，附赠元素周期表静态数据
基于Echarts实现可视化数据大屏3D元素周期表(1页)
HTML网页设计
08-16 617
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ......
3D元素周期表查看器-JavaScript开发
05-26
3D元素周期表查看器3D元素周期表查看3D中的元素周期表。 元素数据源基础数据源：https://github.com/Bowserinator/Periodic-Table-JSON地壳中元素的丰富度：https://en.wikipedia.org/wiki/Abundance_of_elements_in_Earth's_crust
化学元素周期表1.0Vue前端页面版本
最新发布
weixin_54048131的博客
04-13 114
【代码】化学元素周期表1.0Vue前端页面版本。
前端学习（复习）
qq_72343101的博客
10-19 1642
前端学习
用VUEJS开发的周期表
08-10
用VUE JS开发的周期表
门捷列夫：一个Vue.js元素周期表
02-06
门捷列夫 Vue.js元素周期表 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 使用的技术 贡献指南 打开一个问题并描述您要修复的错误或要添加的
vue.js生命周期_具有vue.js的元素周期表
cuk5340的博客
07-28 426
vue.js生命周期 元素周期表 (Periodic Table) Periodic Table with vue.js. 具有vue.js的元素周期表。 View demo 查看演示 Download Source 下载源 项目设置 (Project setup) yarn install 编译和热重装以进行开发 (Compiles and hot-reloads for deve...
定义变量的方法，元素周期表数据集，以元素的原子序数和电子结构为基础进行排列的
weixin_54048131的博客
04-13 135
【代码】定义变量的方法，元素周期表数据集，以元素的原子序数和电子结构为基础进行排列的。
vue.js生命周期_用Vue.js构建的动态元素周期表
cuk5239的博客
07-27 391
vue.js生命周期 周期性 (Periodicity) Periodicity is a dynamic periodic table built with Vue.js that animates and graphs data to aid the visualization of chemical concepts. 周期性是使用Vue.js构建的动态周期表，可对数据进行动画处理和图形化...
vue+el-table制作岗位排班表
04-13
vue+el-table制作岗位排班表
3D元素周期表_表面、球体、螺旋、网格
07-22
3D元素周期表_表面、球体、螺旋、网格
基于Vue实现的ganttlike图表用于排班展示
08-09
基于 Vue 实现的 gantt-like 图表 ,用于排班展示
元素周期表-three.js实战详解
05-17
这个资源是我自己在CSDN上的视频课程的源代码，课程地址：https://download.csdn.net/course/detail/31799 版权所有，盗版或者拷贝在互联网上传播者，会通过法律途径起诉 购买源代码者，如果有不懂的地方可以私信我，我可以协助购买者把项目跑起来，并且回答购买者提出的问题。 凡盗版者，追究到底！
three.js之元素周期表
aaronthon的博客
06-05 1979
three.js之元素周期表 <html><head> <title>three.js css3d - periodic table</title> <meta charset="utf-8"> <meta name="viewport" content="...
Three.js之吊炸天的3D元素周期表探究及再开发
xiao_xiao_b的博客
08-21 2850
吊炸天的3D元素周期表 three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）t...
vue引用three.js详细步骤
铁血猪刚鬣的博客
10-27 6216
three.js： 官网 效果预览： 先去官网找想要引入的模板 首先先下载依赖 npm install three --save 然后是贴官方代码，需要修改的地方主要是window.innerWidth改为dom元素的container.clientWidth，添加this 详细代码如下 1.官方代码引入 import * as THREE from '../build/three.module.js'; import { OrbitControls } from './jsm/controls/O
Three.js视频教程
liuhao9999的博客
04-28 320
three.js入门速成https://download.csdn.net/course/detail/31700元素周期表-three.js实战详解https://download.csdn.net/course/detail/31799three.js打造智能饲料加工厂https://download.csdn.net/course/detail/36327three.js-打造VR看房 快速掌握3D开发https://download.csdn.net/course/detail/31463three
vue threejs 元素周期表 demo下载
08-30
要下载 vue threejs 元素周期表 demo，你可以按照以下步骤进行操作： 首先，打开浏览器并进入搜索引擎，如 Google 或百度。在搜索栏中输入关键词 "vue threejs 元素周期表 demo"，然后点击搜索按钮。 随后，你会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值