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