返回

用 HTML+CSS 模拟米家微波炉

前端

前言

微波炉作为一种常见的厨房电器，它的界面设计通常简洁明了，易于操作。本文将使用 HTML+CSS+JS 模拟一个米家微波炉界面，展示其前端开发技术。

界面设计

模拟的米家微波炉界面主要由以下部分组成：

  • 显示屏：显示加热时间、功率等信息
  • 控制面板：包含数字键、功能键、旋钮等控件

功能实现

  • 倒计时： 用户可以通过数字键或旋钮设置加热时间，微波炉将自动开始倒计时
  • 加热： 用户可以选择不同的加热功率，微波炉将根据设置进行加热
  • 开门/关门： 用户可以点击界面上的开门按钮或使用键盘上的 "O" 键开关门

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="microwave">
    <div class="display">
      <span class="time">00:00</span>
      <span class="power">高</span>
    </div>
    <div class="control-panel">
      <div class="number-pad">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>0</button>
      </div>
      <div class="function-buttons">
        <button>加热</button>
        <button>解冻</button>
        <button>取消</button>
      </div>
      <div class="knob">
        <input type="range" min="0" max="100" value="50">
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

/* 微波炉样式 */
.microwave {
  width: 300px;
  height: 400px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

/* 显示屏样式 */
.display {
  width: 100%;
  height: 100px;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
}

/* 控制面板样式 */
.control-panel {
  width: 100%;
  height: 300px;
}

/* 数字键盘样式 */
.number-pad {
  width: 200px;
  height: 200px;
  float: left;
}

/* 数字按钮样式 */
.number-pad button {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  font-size: 16px;
}

/* 功能按钮样式 */
.function-buttons {
  width: 100px;
  height: 200px;
  float: right;
}

/* 功能按钮样式 */
.function-buttons button {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  font-size: 16px;
}

/* 旋钮样式 */
.knob {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

/* 旋钮输入框样式 */
.knob input {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border: 1px solid #000000;
}

// 倒计时功能
const timeDisplay = document.querySelector('.time');
let timer;

function startTimer(duration) {
  timer = setInterval(() => {
    if (duration > 0) {
      duration--;
      const minutes = Math.floor(duration / 60);
      const seconds = duration % 60;
      timeDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    } else {
      clearInterval(timer);
      alert('加热完成');
    }
  }, 1000);
}

// 加热功能
const powerDisplay = document.querySelector('.power');
let power = '高';

function setPower(newPower) {
  power = newPower;
  powerDisplay.textContent = power;
}

// 开门/关门功能
const doorOpenButton = document.querySelector('.open-door');
const doorClosedButton = document.querySelector('.close-door');
let doorOpen = false;

function openDoor() {
  doorOpen = true;
  doorOpenButton.style.display = 'none';
  doorClosedButton.style.display = 'inline-block';
}

function closeDoor() {
  doorOpen = false;
  doorOpenButton.style.display = 'inline-block';
  doorClosedButton.style.display = 'none';
}

// 绑定事件
const numberButtons = document.querySelectorAll('.number-pad button');
numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    if (!doorOpen) {
      const number = parseInt(button.textContent);
      let time = parseInt(timeDisplay.textContent.split(':')[0]) * 60 + parseInt(timeDisplay.textContent.split(':')[1]);
      time += number * 60;
      startTimer(time);
    }
  });
});

const functionButtons = document.querySelectorAll('.function-buttons button');
functionButtons.forEach(button => {
  button.addEventListener('click', () => {
    if (!doorOpen) {
      if (button.textContent === '加热') {
        startTimer(parseInt(timeDisplay.textContent.split(':')[0]) * 60 + parseInt(timeDisplay.textContent.split(':')[1]));
      } else if (button.textContent === '解冻') {
        setPower('中');
      } else if (button.textContent === '取消') {
        clearInterval(timer);
        timeDisplay.textContent = '00:00';
      }
    }
  });
});

const knobInput = document.querySelector('.knob input');
knobInput.addEventListener('input', () => {
  if (!doorOpen) {
    const powerPercentage = parseInt(knobInput.value);
    if (powerPercentage >= 50) {
      setPower('高');
    } else {
      setPower('中');
    }
  }
});

doorOpenButton.addEventListener('click', openDoor);
doorClosedButton.addEventListener('click', closeDoor);

总结

通过本例，我们展示了如何使用 HTML+CSS+JS 模拟一个米家微波炉界面，并实现了倒计时、加热、开门/关门等功能。希望这篇博文能够帮助前端开发者了解如何构建交互式用户界面。