自己用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>

自己用JavaScript写出吉他和弦图生成器相关推荐

用JavaScript写出100以内与7有关的数
用JavaScript写出100以内与7有关的数,代码如下: a%7==0:表示的是7的倍数: a%10==7:表示的是十位是7的数: parseInt(a/10)==7:表示的是个位是7数: 与7有 ...
用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言在我自学 ...
Markdown写出高大上时序图
上一篇文章分享了如何使用Markdown写流程图,继续挖掘md毫不含糊的功能,再分享一个md格式的时序图. ```seq 数据中台->缓存: 读取缓存缓存->数据中台: 返回缓存 Not ...
HTML5 + Javascript 写出一个钢琴
首发:GitHubClub 原文:juejin.im/post/6879708939190009869 学生时代的我们如果有像郎朗一样的琴技,想必追起女生会非常的容易,但在以前,一架钢琴对普通家庭来说 ...
用JavaScript写出倒计时器
天气寒冷,小手冰凉,又到了写周记的时间了,这周学习的好几个有趣的算法和随机数点名还有倒计时如何制作. function lastTime() {// var now = +new Date();var ...
html写出太极八卦图,求图，谁能用符号拼成太极八卦图！！！！！！！！！！！！...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 ============================================================================= ...
guitar chord html5,‎App Store 上的“吉他和弦(基本): GUITAR CHORD”
这是吉他和弦库的应用程序. 您可以检查吉他和弦及其声音. 包括12个琴键x 32个和弦x 3个指法位置. 这是简单易用的吉他和弦应用. 推荐给初学者和所有吉他手! 请使用此应用程序来改善您的吉他练习. ...
跟着iMeta学做图｜circlize绘制和弦图展示样本物种相对丰度
原始教程链接:https://github.com/iMetaScience/iMetaPlot/tree/main/221027Circlize 写在前面和弦图 (Chord diagram) 可 ...
[读书笔记]5个小技巧让你写出更好的JavaScript[图]
在使用JavaScript时,我们常常要写不少的条件语句.这里有五个小技巧,可以让你写出更干净.漂亮的条件语句. 使用Array.includes来处理多重条件举个栗子: //条件语句 functi ...

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

自己用JavaScript写出吉他和弦图生成器相关推荐

最新文章

热门文章