静态HTML页面实现调号与负和声和弦的数组映射功能

核心索引反向映射逻辑 #

针对大调数组与对应负和声数组的索引反向关联（原数组索引0对应负和声数组索引6，1对应5，以此类推），直接通过数组索引计算即可实现：对于原数组的第i个元素，对应的负和声元素是负和声数组的第(6 - i)个元素（因为两组数组长度均为7，索引范围0-6）。

原生JS实现映射函数 #

假设已定义好对应调号的数组，以C大调为例：

// C大调和弦数组
const cMajorChords = ['C-I', 'd-ii', 'e-iii', 'F-IV', 'G-V', 'a-vi', 'b-vii°'];
// C小调负和声数组
const cMinorNegativeChords = ['g-v', 'f-iv', 'Eb-I', 'd-v°', 'c-i', 'Bb-V', 'Ab-IV'];

// 生成配对数组：原和弦 + 对应负和声和弦
function getNegativeHarmonyPairs(majorArr, negativeArr) {
  return majorArr.map((chord, idx) => {
    const reverseIdx = 6 - idx;
    return {
      original: chord,
      negative: negativeArr[reverseIdx]
    };
  });
}

// 调用函数得到C大调的负和声配对
const cMajorPairs = getNegativeHarmonyPairs(cMajorChords, cMinorNegativeChords);

DOM渲染与色彩对应实现 #

拿到配对数据后，可按色彩规则渲染到页面容器中：

// 渲染配对到DOM
function renderChordPairs(pairs) {
  const container = document.getElementById('chord-container');
  container.innerHTML = ''; // 清空容器

  pairs.forEach((pair, idx) => {
    const pairEl = document.createElement('div');
    // 按索引添加对应色彩类（对应图片的色彩规则）
    pairEl.className = `chord-pair color-${idx}`;
    
    const originalSpan = document.createElement('span');
    originalSpan.className = 'original-chord';
    originalSpan.textContent = pair.original;

    const negativeSpan = document.createElement('span');
    negativeSpan.className = 'negative-chord';
    negativeSpan.textContent = pair.negative;

    pairEl.appendChild(originalSpan);
    pairEl.appendChild(negativeSpan);
    container.appendChild(pairEl);
  });
}

// 给调号按钮绑定点击事件
document.getElementById('c-major-btn').addEventListener('click', () => {
  const pairs = getNegativeHarmonyPairs(cMajorChords, cMinorNegativeChords);
  renderChordPairs(pairs);
});

色彩对应CSS示例 #

通过CSS类名匹配索引，实现图片中的色彩对应效果：

/* 按索引绑定对应背景色 */
.chord-pair.color-0 { background-color: #f8bbd0; }
.chord-pair.color-1 { background-color: #f48fb1; }
.chord-pair.color-2 { background-color: #f06292; }
.chord-pair.color-3 { background-color: #ec407a; }
.chord-pair.color-4 { background-color: #e91e63; }
.chord-pair.color-5 { background-color: #d81b60; }
.chord-pair.color-6 { background-color: #c2185b; }

.chord-pair {
  padding: 10px;
  margin: 8px 0;
  display: flex;
  gap: 20px;
}

.original-chord, .negative-chord {
  padding: 6px 12px;
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者ArtimusMaximus