.tech-card { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(51, 65, 85, 0.6); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .tech-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #38bdf8; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } /* 比特网格容器 */ .bit-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; background: #030712; border-radius: 10px; border: 1px solid #1e293b; } .nibble-group { display: flex; gap: 3px; background: #090e1f; padding: 4px; border-radius: 8px; border: 1px solid #1e293b; } .bit-box { width: 30px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: #0f172a; border: 1px solid #334155; border-radius: 5px; cursor: pointer; user-select: none; padding: 3px 0; transition: all 0.12s; } @media (max-width: 640px) { .bit-container { gap: 4px; padding: 8px 4px; } .nibble-group { gap: 2px; padding: 2px; } .bit-box { width: 20px; height: 36px; padding: 1px 0; } .bit-idx { font-size: 8px !important; } .bit-val { font-size: 11px !important; } .bit-weight { display: none; } } .bit-box:hover { border-color: #38bdf8; transform: translateY(-2px); } .bit-box.bit-1 { background: #064e3b; border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.35); } .bit-box.bit-1 .bit-val { color: #34d399; font-weight: 900; } .bit-idx { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 9px; color: #64748b; } .bit-val { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 16px; font-weight: 700; color: #94a3b8; line-height: 1; } .bit-weight { font-family: 'JetBrains Mono', monospace; font-size: 8px; color: #475569; } /* 运算符按钮条 */ .op-btn { background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #cbd5e1; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; } .op-btn:hover { border-color: #38bdf8; color: #ffffff; background: #1e293b; } .op-btn.active { background: #0284c7; border-color: #38bdf8; color: #ffffff; box-shadow: 0 0 14px rgba(56, 189, 248, 0.4); } /* 结果展示与统计卡片 */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .stat-box { background: #090e1f; border: 1px solid #1e293b; border-radius: 10px; padding: 12px 14px; } .stat-label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; margin-bottom: 4px; display: flex; justify-content: space-between; } .stat-val { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 16px; font-weight: 800; color: #f1f5f9; word-break: break-all; } /* 经典算法卡片 */ .trick-item { background: #090e1f; border: 1px solid #1e293b; border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: all 0.15s; } .trick-item:hover { border-color: #38bdf8; background: #0f172a; }
/ 计算机位运算与逻辑门实验室 ← 首页

计算机位运算与逻辑门实验室

纯前端计算机底层位运算与逻辑门交互实验室,支持 8 位、16 位、32 位二进制比特网格交互翻转,实时演示 AND、OR、XOR、NOT、移位操作,联动显示有符号/无符号、十六进制及经典位运算算法。
选择比特位宽:
操作数 A (Operand A) [有符号: {{ numA_signed }} | 无符号: {{ numA_unsigned }} | 0x{{ numA_hex }}]
{{ bit.index }} {{ bit.val }} {{ bit.weightStr }}
选择位运算操作符 (Bitwise Operator) 当前操作: {{ currentOpObj.desc }}
双操作数运算 (Binary Operations):
单操作数与移位运算 (Unary & Shift Operations on A):
移位步长 (Shift amount n): {{ shiftAmount }} 位
操作数 B (Operand B) [有符号: {{ numB_signed }} | 无符号: {{ numB_unsigned }} | 0x{{ numB_hex }}]
{{ bit.index }} {{ bit.val }} {{ bit.weightStr }}
运算结果 (Result = {{ formulaString }})
二进制位流与进位状态
{{ bit.index }} {{ bit.val }} {{ bit.weightStr }}
结果多维数值解码系统 (Multi-Representation Decoder)
有符号整数 (Signed 2's Complement) 补码值
{{ resultStats.signed }}
范围: [{{ signedMin }} ~ {{ signedMax }}]
无符号整数 (Unsigned Decimal) 无符号
{{ resultStats.unsigned }}
范围: [0 ~ {{ unsignedMax }}]
十六进制 (Hexadecimal) HEX
0x{{ resultStats.hex }}
八进制: 0o{{ resultStats.octal }}
比特特征度量 (Popcount & Zeros) 比特统计
置1比特数 (Hamming): {{ resultStats.popcount }}
前导0个数 (CLZ): {{ resultStats.clz }} | 尾随0 (CTZ): {{ resultStats.ctz }}
奇偶校验 (Parity): {{ resultStats.popcount % 2 === 0 ? '偶 (Even)' : '奇 (Odd)' }}
IEEE-754 单精度浮点数拆解 (Float32 Inspector) ≈ {{ resultStats.float32Val }}
符号位 S (Bit 31): {{ resultStats.floatS }} ({{ resultStats.floatS === '1' ? '负数 -' : '正数 +' }})
阶码 E (Bits 30-23, 8位): {{ resultStats.floatE }} (指数: {{ resultStats.floatExpVal }})
尾数 M (Bits 22-0, 23位): {{ resultStats.floatM }}
经典位运算算法与黑魔法 (Bit Manipulation Hacks) 点击快速载入测试用例
{{ hack.title }}
{{ hack.code }}
{{ hack.desc }}

介绍

位运算(Bitwise Operation)直接作用于计算机底层内存的二进制位(Bits),是高性能算法、网络协议解析、密码学加密及系统编程的核心基础。本实验室提供直观的比特可视化操作,支持实时比特翻转、经典逻辑门模拟、有符号/无符号数转换与位运算黑魔法技巧速查。