当前位置：首页 > news >正文

JavaScript 实现 WiFi 信号强度模拟类

news 来源：原创 2025/6/23 17:50:40

wifi信号class类

class WifiSignal {
    constructor(options = {}) {
        // 合并配置
        this.config = {
            parentContainer: 'body',
            strength: 1,
            colors: {
                low: '#ff4444',
                medium: '#ffa500',
                high: '#4CAF50'
            },
            ...options
        };

        // 初始化验证
        this.validateConfig();

        // 创建DOM结构
        this.initDOM();

        // 初始渲染
        this.update(this.config.strength);
    }

    validateConfig() {
        // 容器验证
        if (!document.querySelector(this.config.parentContainer)) {
            throw new Error(`无效的父容器选择器: ${this.config.parentContainer}`);
        }

        // 强度验证
        if (this.config.strength < 1 || this.config.strength > 5) {
            throw new Error('信号强度必须介于1-5之间');
        }

        // 颜色格式验证
        const colorRegex = /^#([0-9A-F]{3}){1,2}$/i;
        Object.values(this.config.colors).forEach(color => {
            if (!colorRegex.test(color)) {
                throw new Error(`无效的颜色格式: ${color}`);
            }
        });
    }

    initDOM() {
        // 创建容器
        this.container = document.createElement('div');
        this.container.className = 'wifi-signal-wrapper';

        // 创建信号条
        this.barsContainer = document.createElement('div');
        this.barsContainer.className = 'wifi-bars-container';

        this.bars = Array.from({ length: 5 }, (_, i) => {
            const bar = document.createElement('div');
            bar.className = `wifi-bar wifi-bar-${i + 1}`;
            return bar;
        });

        // 组装结构
        this.bars.forEach(bar => this.barsContainer.appendChild(bar));
        this.container.appendChild(this.barsContainer);

        // 挂载到页面
        document.querySelector(this.config.parentContainer)
            .appendChild(this.container);
    }

    update(newStrength) {
        // 验证强度值
        const strength = Math.max(1, Math.min(5, parseInt(newStrength)));
        if (isNaN(strength)) return;

        // 确定颜色等级
        let colorLevel;
        if (strength <= 2) colorLevel = 'low';
        else if (strength === 3) colorLevel = 'medium';
        else colorLevel = 'high';

        // 更新所有信号条颜色
        this.bars.forEach((bar, index) => {
            bar.style.backgroundColor = index < strength ?
                this.config.colors[colorLevel] : '#e0e0e0';
        });
    }
}

wifi信号css

/* wifi-signal.css (组件专用样式) */
.wifi-signal-wrapper {
      display: inline-block;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.wifi-bars-container {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 60px;
}

.wifi-bar {
      width: 16px;
      background: #e0e0e0;
      border-radius: 3px;
      transition: background 0.3s ease;
}

.wifi-bar-1 { height: 20%; }
.wifi-bar-2 { height: 40%; }
.wifi-bar-3 { height: 60%; }
.wifi-bar-4 { height: 80%; }
.wifi-bar-5 { height: 100%; }

调用方的html

<!-- index.html (调用方示例) -->
<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
      <title>WiFi信号组件调用示例</title>
      <!-- 组件样式 -->
      <link rel="stylesheet" href="index.css">
      <!-- 调用方自定义样式 -->
      <style>
        /* 调用方自己的控制按钮样式 */
        .custom-controls {
              margin-top: 20px;
              text-align: center;
            }
        .custom-controls button {
              padding: 10px 20px;
              margin: 0 5px;
              background: #f0f0f0;
              border: 1px solid #ddd;
              border-radius: 4px;
              cursor: pointer;
            }
        .custom-controls button:hover {
              background: #4CAF50;
              color: white;
            }
      </style>
</head>
<body>
  <!-- 组件挂载点 -->
  <div id="wifiMount"></div>
   
  <!-- 调用方自己的控制按钮 -->
  <div class="custom-controls">
        <button onclick="wifi.update(1)">1格</button>
        <button onclick="wifi.update(2)">2格</button>
        <button onclick="wifi.update(3)">3格</button>
        <button onclick="wifi.update(4)">4格</button>
        <button onclick="wifi.update(5)">5格</button>
      </div>

  <!-- 组件库 -->
  <script src="index.js"></script>
  <!-- 调用方初始化代码 -->
  <script>
    // 初始化组件实例
    const wifi = new WifiSignal({
        parentContainer: '#wifiMount', // 挂载点选择器
        strength: 4,          // 初始强度
        colors: {            // 可选自定义颜色
            low: '#ff4444',
            medium: '#ffa500',
            high: '#4CAF50'
        }
    });
</script>
</body>
</html>