算盘js实现

算盘的JavaScript实现

算盘是一种古老的计算工具，通过JavaScript可以模拟其基本功能。以下是实现一个简单算盘的关键步骤和代码示例。

初始化HTML结构

创建一个基本的HTML结构，包含算盘的框架和珠子。使用<div>元素表示算盘的横梁和珠子。

<div id="abacus">
  <div class="beam"></div>
  <div class="rod" id="rod1">
    <div class="upper-bead" data-value="5"></div>
    <div class="lower-bead" data-value="1"></div>
  </div>
  <!-- 更多 rods... -->
</div>

添加CSS样式

为算盘和珠子添加样式，使其看起来更接近真实的算盘。珠子需要绝对定位以便拖动。

#abacus {
  width: 500px;
  height: 200px;
  position: relative;
  background: #8B4513;
}
.beam {
  width: 100%;
  height: 10px;
  background: #000;
  position: absolute;
  top: 50px;
}
.rod {
  width: 50px;
  height: 150px;
  position: absolute;
  border-left: 1px solid #000;
}
.upper-bead, .lower-bead {
  width: 40px;
  height: 20px;
  background: #FF0000;
  position: absolute;
  cursor: pointer;
}

实现珠子交互逻辑

使用JavaScript实现珠子的点击或拖动功能。珠子移动时需要更新其位置和对应的数值。

document.querySelectorAll('.upper-bead, .lower-bead').forEach(bead => {
  bead.addEventListener('mousedown', function(e) {
    const rod = this.parentElement;
    const isUpper = this.classList.contains('upper-bead');
    const startY = e.clientY;

    function moveBead(e) {
      const deltaY = e.clientY - startY;
      const newY = Math.min(Math.max(deltaY, isUpper ? -20 : 0), isUpper ? 0 : 30);
      this.style.transform = `translateY(${newY}px)`;
    }

    function releaseBead() {
      document.removeEventListener('mousemove', moveBead);
      document.removeEventListener('mouseup', releaseBead);
      updateTotal();
    }

    document.addEventListener('mousemove', moveBead.bind(this));
    document.addEventListener('mouseup', releaseBead);
  });
});

计算当前数值

根据珠子的位置计算当前算盘表示的数字。每个珠子的位置对应不同的数值。

function updateTotal() {
  let total = 0;
  document.querySelectorAll('.rod').forEach(rod => {
    const upperBead = rod.querySelector('.upper-bead');
    const lowerBead = rod.querySelector('.lower-bead');

    const upperValue = parseInt(upperBead.dataset.value);
    const lowerValue = parseInt(lowerBead.dataset.value);

    const upperActive = upperBead.style.transform.includes('0px');
    const lowerActive = !lowerBead.style.transform || lowerBead.style.transform.includes('30px');

    total += (upperActive ? 0 : upperValue) + (lowerActive ? lowerValue : 0);
  });
  console.log('Total:', total);
}

扩展功能

可以添加更多功能，如重置算盘、保存当前状态或支持更多位数的计算。以下是一个重置功能的示例：

function resetAbacus() {
  document.querySelectorAll('.upper-bead').forEach(bead => {
    bead.style.transform = 'translateY(-20px)';
  });
  document.querySelectorAll('.lower-bead').forEach(bead => {
    bead.style.transform = '';
  });
  updateTotal();
}

通过以上步骤，可以实现一个基本的交互式算盘。根据需求可以进一步优化样式和交互方式。