js实现浏览器中Windows PE x86/x64 二进制与汇编互转工具代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现浏览器中Windows PE x86/x64 二进制与汇编互转工具代码

代码标签： js 浏览器 x86 x64 Windows PE 二进制程序汇编语言互转工具代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windows PE x86/x64 二进制 ⇄ 汇编 转换器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#0a1628 0%,#1a2744 40%,#0d1f3c 100%);min-height:100vh;color:#d0d8e8;overflow-x:hidden}
.container{max-width:1500px;margin:0 auto;padding:15px}

/* Header */
header{text-align:center;padding:25px 0 15px}
header h1{font-size:2em;background:linear-gradient(90deg,#00b4d8,#4895ef,#f72585);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
header .subtitle{color:#6b7b9a;font-size:.95em;margin-top:6px}
header .badges{display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}
header .badge{padding:3px 12px;border-radius:20px;font-size:.72em;border:1px solid #2a3a5a}
.badge-pe{background:rgba(247,37,133,.15);color:#f72585;border-color:#f72585!important}
.badge-dll{background:rgba(72,149,239,.15);color:#4895ef;border-color:#4895ef!important}
.badge-sys{background:rgba(0,180,216,.15);color:#00b4d8;border-color:#00b4d8!important}
.badge-coff{background:rgba(76,201,141,.15);color:#4cc98d;border-color:#4cc98d!important}

/* Toolbar */
.toolbar{display:flex;justify-content:center;gap:10px;margin:15px 0;flex-wrap:wrap;align-items:center}
.toolbar select,.toolbar button{padding:9px 18px;border:1px solid #2a3a5a;border-radius:8px;background:#121e36;color:#d0d8e8;font-size:13px;cursor:pointer;transition:all .3s}
.toolbar select:hover,.toolbar button:hover{border-color:#4895ef;box-shadow:0 0 12px rgba(72,149,239,.25)}
.btn-asm{background:linear-gradient(135deg,#4895ef,#00b4d8)!important;border:none!important;font-weight:bold;color:#fff!important}
.btn-dis{background:linear-gradient(135deg,#f72585,#b5179e)!important;border:none!important;font-weight:bold;color:#fff!important}
.btn-dl{background:linear-gradient(135deg,#4cc98d,#06d6a0)!important;border:none!important;color:#fff!important}
.btn-clr{background:linear-gradient(135deg,#ef476f,#d62839)!important;border:none!important;color:#fff!important}
.btn-asm:hover,.btn-dis:hover,.btn-dl:hover,.btn-clr:hover{transform:translateY(-2px);filter:brightness(1.15)}

/* Main Grid */
.main-grid{display:grid;grid-template-columns:1fr 70px 1fr;gap:12px;margin:15px 0;align-items:stretch}
@media(max-width:960px){.main-grid{grid-template-columns:1fr;}.arrows{flex-direction:row!important;padding:8px!important}}

/* Panel */
.panel{background:rgba(18,30,54,.92);border:1px solid #1e3050;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.panel-hd{padding:12px 18px;background:rgba(26,39,68,.95);border-bottom:1px solid #1e3050;display:flex;justify-content:space-between;align-items:center}
.panel-hd h3{font-size:1em;color:#4895ef}
.panel-hd .info{padding:2px 10px;border-radius:12px;font-size:.7em;background:rgba(72,149,239,.18);color:#90b8f8}
.panel-bd{flex:1;display:flex;flex-direction:column}

/* Editor */
.editor{width:100%;flex:1;min-height:480px;background:rgba(8,14,28,.95);border:none;color:#4cc98d;font-family:'Fira Code','Cascadia Code','Consolas',monospace;font-size:12.5px;padding:14px;resize:none;outline:none;line-height:1.65;tab-size:4}
.editor::placeholder{color:#2a3a5a}
.editor.hex-view{color:#f0a500}

/* Arrows */
.arrows{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}
.arr-btn{width:56px;height:56px;border-radius:50%;border:2px solid #4895ef;background:rgba(72,149,239,.08);color:#4895ef;font-size:22px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.arr-btn:hover{background:rgba(72,149,239,.25);transform:scale(1.12);box-shadow:0 0 18px rgba(72,149,239,.35)}

/* File upload */
.file-up{padding:12px;border-bottom:1px solid #1e3050;text-align:center}
.file-up label{display:inline-block;padding:7px 18px;background:rgba(72,149,239,.12);border:1px dashed #4895ef;border-radius:8px;cursor:pointer;font-size:12px;transition:all .3s}
.file-up label:hover{background:rgba(72,149,239,.3)}
.file-up input[type=file]{display:none}

/* Templates */
.tmpl-row{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid #1e3050}
.tmpl-btn{padding:3px 10px;border-radius:14px;border:1px solid #2a3a5a;background:transparent;color:#6b7b9a;font-size:11px;cursor:pointer;transition:all .3s}
.tmpl-btn:hover{border-color:#f72585;color:#f72585}

/* Status bar */
.status{padding:8px 18px;background:rgba(8,14,28,.9);border-top:1px solid #1e3050;display:flex;justify-content:space-between;font-size:11px;color:#3a4f70}

/* Format select row */
.fmt-row{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid #1e3050;align-items:center}
.fmt-row label{font-size:11px;color:#6b7b9a}
.fmt-row select{padding:3px 8px;background:#0a1628;border:1px solid #2a3a5a;border-radius:4px;color:#90b8f8;font-size:11px}

/* Log */
.log-panel{margin:15px 0}
.log-panel .panel-bd{padding:12px;max-height:180px;overflow-y:auto}
#log-out{font-family:'Fira Code',monospace;font-size:11.5px;line-height:1.8;white-space:pre-wrap;color:#6b7b9a}
.le{color:#ef476f!important}.ls{color:#4cc98d!important}.li{color:#4895ef!important}.lw{color:#f0a500!important}

/* Progress */
.prog{height:3px;background:#121e36;border-radius:2px;overflow:hidden;margin:4px 0;display:none}
.prog.on{display:block}
.prog .fill{height:100%;background:linear-gradient(90deg,#4895ef,#f72585);width:0%;transition:width .3s;border-radius:2px}

/* Tabs */
.tabs{display:flex;gap:2px;padding:0 14px;padding-top:8px}
.tab{padding:6px 14px;background:rgba(18,30,54,.5);border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;font-size:11px;color:#3a4f70;transition:all .3s}
.tab.active{background:rgba(26,39,68,.95);color:#4895ef;border-color:#1e3050}

/* Reference */
.ref-section{margin:25px 0}
.ref-section>h3{color:#f72585;margin-bottom:12px;font-size:1.2em}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ref-card{background:rgba(18,30,54,.85);border:1px solid #1e3050;border-radius:10px;padding:14px}
.ref-card h4{color:#4895ef;margin-bottom:8px;font-size:.88em}
.ref-card table{width:100%;border-collapse:collapse;font-size:11.5px}
.ref-card th,.ref-card td{padding:4px 6px;text-align:left;border-bottom:1px solid #121e36}
.ref-card th{color:#f72585}
.ref-card td:first-child{color:#f0a500;font-family:monospace}
.ref-card td:nth-child(2){color:#4cc98d;font-family:monospace}

/* Scrollbar */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:#0a1628}
::-webkit-scrollbar-thumb{background:#2a3a5a;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a4f70}

/* Modal */
.modal-bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:1000;justify-content:center;align-items:center}
.modal-bg.on{display:flex}
.modal-box{background:#1a2744;border:1px solid #2a3a5a;border-radius:14px;padding:25px;max-width:650px;width:92%;max-height:82vh;overflow-y:auto}
.modal-box h3{color:#4895ef;margin-bottom:15px}

/* PE structure visualization */
.pe-vis{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:10px 0}
.pe-block{padding:8px;border-radius:6px;text-align:center;font-size:11px;font-family:monospace;cursor:pointer;transition:all .3s}
.pe-block:hover{transform:scale(1.05);filter:brightness(1.2)}
.pe-dos{background:rgba(247,37,133,.2);border:1px solid #f72585;color:#f72585}
.pe-sig{background:rgba(72,149,239,.2);border:1px solid #4895ef;color:#4895ef}
.pe-coff{background:rgba(76,201,141,.2);border:1px solid #4cc98d;color:#4cc98d}
.pe-opt{background:rgba(240,165,0,.2);border:1px solid #f0a500;color:#f0a500}
.pe-sec{background:rgba(0,180,216,.2);border:1px solid #00b4d8;color:#00b4d8}
.pe-code{background:rgba(114,9,183,.2);border:1px solid #7209b7;color:#c77dff}
</style>
</head>
<body>
<div class="container">
<header>
    <h1>⚙️ Windows PE x86/x64 二进制 ⇄ 汇编 转换器</h1>
    <p class="subtitle">纯浏览器端实现 PE/EXE/DLL/SYS/COFF 与 x86/x64 汇编语言的相互转换</p>
    <div class="badges">
        <span class="badge badge-pe">🔷 PE/EXE</span>
        <span class="badge badge-dll">📦 DLL</span>
        <span class="badge badge-sys">🔧 SYS</span>
        <span class="badge badge-coff">📄 COFF/OBJ</span>
    </div>
</header>

<div class="toolbar">
    <select id="arch-sel">
        <option value="x64" selected>x86-64 (64-bit PE32+)</option>
        <option value="x86">x86 (32-bit PE32)</option>
    </select>
    <select id="pe-type-sel">
        <option value="exe" selected>EXE (可执行程序)</option>
        <option value="dll">DLL (动态链接库)</option>
        <option value="sys">SYS (驱动程序)</option>
        <option value="raw">RAW (纯机器码)</option>
    </select>
    <select id="syntax-sel">
        <option value="masm" selected>MASM 语法</option>
        <option value="nasm">NASM 语法</option>
        <option value="gas">GAS/AT&T 语法</option>
    </select>
    <button class="btn-asm" onclick="doAssemble()">🔨 汇编</.........完整代码请登录后点击上方下载按钮下载查看