自己用JavaScript写出吉他和弦图生成器

前言：因为自己有个设计衣服的想法，但网络搜到的和弦图都太模糊，也对市场上的和弦图生成器不太清楚，于是，用自己所学，使用JavaScript写出和弦图

和弦图画起来也是比较简单的，分析一下，就是横竖线，加点位。

步骤：

1、容器

首先创建和弦容器，使用absolute定位；定义好它的宽高。

        let container = document.createElement("div");
        container.id = `poi-${Object.keys(this.gittarPoi[index])}`;
        gittar.appendChild(container);
        container.style.position = "absolute";
        container.style.width = "50px";
        container.style.height = "46px";
        container.style.top = 0;
        container.style.left = `${index * 56}px`;
        // 和弦格子
        container.style.top = 0;

2、接着就可以画格子了

          
          // 竖线
          let v_ul = document.createElement("ul");
          container.appendChild(v_ul);
          for (let i = 0; i < 6; i++) {
            let v_li = document.createElement("li");
            v_li.id = `v-${index}-${i}`;
            v_ul.appendChild(v_li);
            v_li.style["list-style-type"] = "none";
            v_li.style.position = "absolute";
            v_li.style["border-left"] = "1px solid #000";
            v_li.style.height = "46px";
            v_li.style.left = `${i * 10}px`;
            v_li.style.top = 0;
          }
          // 横线
          let h_ul = document.createElement("ul");
          container.appendChild(h_ul);
          for (let j = 0; j <= 3; j++) {
            let h_li = document.createElement("li");
            h_li.id = `h-${index}-${j}`;
            h_ul.appendChild(h_li);
            h_li.style["list-style-type"] = "none";
            h_li.style.position = "absolute";
            h_li.style["border-top"] = "1px solid #000";
            h_li.style.width = "50px";
            h_li.style.top = `${j * 15}px`;
            h_li.style.left = 0;
          }

3、点位

initPoi() {
      this.gittarPoi.forEach((element) => {
        const container = document.getElementById(
          `poi-${Object.keys(element)}`
        );
          Object.keys(element).forEach((item) => {
            element[item].forEach((vh, index1) => {
              // 和弦点位坐标
              let poi = document.createElement("div");
              poi.id = `${Object.keys(element) + index1}`;
              container.appendChild(poi);
              poi.style.position = "absolute";
              poi.style["border-radius"] = "50%";
              poi.style.width = "8px";
              poi.style.background = "#000";
              poi.style.height = "8px";
              //偏移量与坐标、单位宽度、半径
              poi.style.right = `${(vh[0] - 1) * 10 - 4 - 0.25}px`;
              poi.style.top = `${(vh[1] - 1) * 15 + 4 + 0.25}px`;
            });
          });
      });
    },

例子：

自己在vue里面写了一个小demo

<template>
  <div class="gittar" id="gittar"></div>
</template>

<script>
export default {
  data() {
    return {
      gittarPoi: [
        {
          f: [
            [6, 1],
            [5, 3],
            [4, 3],
            [3, 2],
            [2, 1],
            [1, 1],
          ],
        },
        {
          u: "U",
        },
        {
          c: [
            [5, 3],
            [4, 2],
            [2, 1],
          ],
        },
        {
          k: "K",
        },
      ],
    };
  },
  mounted() {
    this.drawGrid();
    this.initPoi();
  },
  methods: {
    drawGrid() {
      let gittar = document.getElementById("gittar");
      // 根据gittarPoi创建元素
      for (let index = 0; index < this.gittarPoi.length; index++) {
        let container = document.createElement("div");
        container.id = `poi-${Object.keys(this.gittarPoi[index])}`;
        gittar.appendChild(container);
        container.style.position = "absolute";
        container.style.width = "50px";
        container.style.height = "46px";
        container.style.top = 0;
        container.style.left = `${index * 56}px`;
        // 判断是否为和弦图
        if (Array.isArray(Object.values(this.gittarPoi[index])[0])) {
          // 和弦格子
          container.style.top = 0;
          // 竖线
          let v_ul = document.createElement("ul");
          container.appendChild(v_ul);
          for (let i = 0; i < 6; i++) {
            let v_li = document.createElement("li");
            v_li.id = `v-${index}-${i}`;
            v_ul.appendChild(v_li);
            v_li.style["list-style-type"] = "none";
            v_li.style.position = "absolute";
            v_li.style["border-left"] = "1px solid #000";
            v_li.style.height = "46px";
            v_li.style.left = `${i * 10}px`;
            v_li.style.top = 0;
          }
          // 横线
          let h_ul = document.createElement("ul");
          container.appendChild(h_ul);
          for (let j = 0; j <= 3; j++) {
            let h_li = document.createElement("li");
            h_li.id = `h-${index}-${j}`;
            h_ul.appendChild(h_li);
            h_li.style["list-style-type"] = "none";
            h_li.style.position = "absolute";
            h_li.style["border-top"] = "1px solid #000";
            h_li.style.width = "50px";
            h_li.style.top = `${j * 15}px`;
            h_li.style.left = 0;
          }
        } else {
          container.style.top = "-10px";
        }
      }
    },
    initPoi() {
      this.gittarPoi.forEach((element) => {
        const container = document.getElementById(
          `poi-${Object.keys(element)}`
        );
        // 判断是否为和弦图
        if (Array.isArray(Object.values(element)[0])) {
          Object.keys(element).forEach((item) => {
            element[item].forEach((vh, index1) => {
              // 和弦点位坐标
              let poi = document.createElement("div");
              poi.id = `${Object.keys(element) + index1}`;
              container.appendChild(poi);
              poi.style.position = "absolute";
              poi.style["border-radius"] = "50%";
              poi.style.width = "8px";
              poi.style.background = "#000";
              poi.style.height = "8px";
              //偏移量与坐标、单位宽度、半径
              poi.style.right = `${(vh[0] - 1) * 10 - 4 - 0.25}px`;
              poi.style.top = `${(vh[1] - 1) * 15 + 4 + 0.25}px`;
            });
          });
        } else {
          // 文字样式
          let text = document.createElement("div");
          container.appendChild(text);
          let newText = document.createTextNode(`${Object.values(element)[0]}`);
          text.appendChild(newText);
          text.style.fontSize = "50px";
          text.style.marginLeft = "8px";
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.gittar {
  position: absolute;
}
</style>