当前位置：首页 > JavaScript

js实现LCD

2026-02-01 16:34:44JavaScript

LCD 数字显示实现

使用 JavaScript 在网页上模拟 LCD（液晶显示屏）数字效果，可以通过 CSS 和 Canvas 两种方式实现。以下是具体方法：

CSS 实现方法

利用 CSS 的伪元素和边框属性创建 LCD 数字的七段显示效果：

<div class="lcd-digit" data-digit="8"></div>

.lcd-digit {
  position: relative;
  width: 60px;
  height: 100px;
  display: inline-block;
}

.lcd-digit::before,
.lcd-digit::after {
  content: '';
  position: absolute;
  background-color: #00ff00; /* LCD颜色 */
  border-radius: 5px;
}

/* 横向段 */
.lcd-digit::before {
  width: 40px;
  height: 10px;
  left: 10px;
}

/* 纵向段 */
.lcd-digit::after {
  width: 10px;
  height: 40px;
  top: 10px;
}

/* 根据数字显示不同段 */
.lcd-digit[data-digit="0"]::before {
  box-shadow: 
    0 0 0 10px #00ff00, /* 上段 */
    0 90px 0 10px #00ff00; /* 下段 */
}

.lcd-digit[data-digit="0"]::after {
  box-shadow: 
    50px 0 0 0 #00ff00, /* 右上段 */
    0 50px 0 0 #00ff00, /* 右下段 */
    -50px 0 0 0 #00ff00, /* 左上段 */
    0 -50px 0 0 #00ff00; /* 左下段 */
}

Canvas 实现方法

使用 Canvas 绘制更灵活的 LCD 显示效果：

js实现LCD

class LCDDisplay {
  constructor(canvasId, options = {}) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.width = options.width || 300;
    this.height = options.height || 500;
    this.color = options.color || '#00FF00';
    this.bgColor = options.bgColor || '#222222';

    this.canvas.width = this.width;
    this.canvas.height = this.height;
  }

  drawDigit(digit, x, y, size) {
    const segments = [
      [1, 1, 1, 0, 1, 1, 1], // 0
      [0, 0, 1, 0, 0, 1, 0], // 1
      // ...其他数字定义
    ];

    const digitSegments = segments[digit];
    this.clear();

    // 绘制七段显示
    if(digitSegments[0]) this.drawHorizontal(x, y, size);
    if(digitSegments[1]) this.drawVertical(x + size, y, size);
    // ...其他段
  }

  drawHorizontal(x, y, size) {
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(x, y, size * 2, size/4);
  }

  drawVertical(x, y, size) {
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(x, y, size/4, size);
  }

  clear() {
    this.ctx.fillStyle = this.bgColor;
    this.ctx.fillRect(0, 0, this.width, this.height);
  }
}

第三方库方案

现有 JavaScript 库可直接实现 LCD 效果：

LCD.js - 专门用于创建 LCD 风格显示

js实现LCD

const display = new LCD('display-container', {
  width: 300,
  height: 100,
  color: '#00FF00'
});
display.print('1234');

SevenSegment.js - 专注于七段显示实现

const segment = new SevenSegment({
  element: document.getElementById('display'),
  color: 'green',
  thickness: 4
});
segment.display('888');

动态效果增强

添加 LCD 数字变化动画效果：

function animateLCDChange(oldVal, newVal, element) {
  const duration = 500;
  const startTime = Date.now();

  function update() {
    const elapsed = Date.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // 中间状态显示
    if(progress < 0.5) {
      element.textContent = oldVal;
    } else {
      element.textContent = newVal;
    }

    if(progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

响应式设计考虑

确保 LCD 显示在不同设备上保持比例：

.lcd-container {
  font-size: 1vw; /* 视口单位 */
  transform: scale(0.8);
  transform-origin: left top;
}

@media (max-width: 768px) {
  .lcd-digit {
    width: 40px;
    height: 70px;
  }
}

以上方法提供了从简单到复杂的 JavaScript LCD 实现方案，可根据项目需求选择合适的实现方式。CSS 方案适合简单静态显示，Canvas 方案提供更多自定义功能，而第三方库可以快速实现专业效果。