当前位置：首页 > JavaScript

Js实现算盘

2026-04-05 14:34:55JavaScript

使用JavaScript实现算盘

基本结构

算盘通常由框架、横梁、算珠和档组成。在HTML中可以用<div>元素模拟这些结构。框架可以用一个外层容器表示，横梁用水平线，算珠用圆形元素，档用垂直线。

<div id="abacus">
  <div class="beam"></div>
  <div class="rod"></div>
  <div class="upper-bead"></div>
  <div class="lower-bead"></div>
</div>

CSS样式设置

算珠需要绝对定位以便移动。上珠（天珠）每个代表5，下珠（地珠）每个代表1。

#abacus {
  position: relative;
  width: 300px;
  height: 200px;
  border: 2px solid #000;
}

.beam {
  height: 2px;
  background: #000;
}

.rod {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #000;
}

.upper-bead {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f00;
}

.lower-bead {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00f;
}

JavaScript交互逻辑

通过事件监听实现算珠的拖动和数值计算。使用mousedown、mousemove和mouseup事件处理拖动。

class Abacus {
  constructor() {
    this.value = 0;
    this.beads = [];
    this.init();
  }

  init() {
    this.createRods(5); // 创建5档
    this.createBeads();
    this.addEventListeners();
  }

  createRods(count) {
    // 创建档
  }

  createBeads() {
    // 创建算珠
  }

  addEventListeners() {
    document.querySelectorAll('.bead').forEach(bead => {
      bead.addEventListener('mousedown', this.handleMouseDown);
    });
  }

  handleMouseDown(e) {
    // 拖动开始
  }

  calculate() {
    // 计算当前数值
  }
}

new Abacus();

数值计算

每档的上珠代表5，下珠代表1。计算时需要遍历所有档位累加值。

calculate() {
  let total = 0;
  this.rods.forEach(rod => {
    const upperActive = rod.upperBeads.filter(b => b.active).length;
    const lowerActive = rod.lowerBeads.filter(b => b.active).length;
    total += upperActive * 5 + lowerActive;
  });
  this.value = total;
  this.updateDisplay();
}

完整实现

完整实现需要考虑多档位、边界检测和视觉效果。可以使用Canvas或SVG替代DOM元素提高性能。

Js实现算盘

// 完整类实现
class Abacus {
  constructor(container, rods = 5) {
    this.container = document.getElementById(container);
    this.rodsCount = rods;
    this.value = 0;
    this.init();
  }

  init() {
    this.createStructure();
    this.addEventListeners();
  }

  createStructure() {
    // 创建完整结构
  }

  // 其他方法实现...
}