代码实现虚拟变化主题键盘，给代码赋予魅力

2023-10-02 20:59:17

随着科技的不断发展，作为程序员的我们，每天都在与键盘打交道。有时候，单调的键盘会让我们感到厌烦。今天，我们就来使用CSS，实现一款虚拟变化主题键盘，为我们的代码赋予魅力。

一、键盘布局

.keyboard {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

.key {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  font-size: 20px;
}

二、主题变化

.keyboard {
  --theme-color: #ffffff;
}

.key {
  background-color: var(--theme-color);
}

.theme-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  background-color: #000000;
  border: 1px solid #ffffff;
  border-radius: 5px;
  font-size: 20px;
}

.theme-selector button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  font-size: 20px;
}

三、JavaScript代码

const keyboard = document.querySelector('.keyboard');
const themeSelector = document.querySelector('.theme-selector');
const buttons = themeSelector.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const color = button.style.backgroundColor;
    keyboard.style.setProperty('--theme-color', color);
  });
});