js+css实现可视化拖拽电路仿真设计运行模拟编辑器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现可视化拖拽电路仿真设计运行模拟编辑器代码

下面为部分代码预览，完整代码请点击下载或在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>电子电路设计与仿真器</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #1a1a2e; color: #e0e0e0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }

/* 顶部工具栏 */
.toolbar {
    background: #16213e;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #0f3460;
    z-index: 100;
    flex-shrink: 0;
}
.toolbar h1 { font-size: 16px; color: #00d4ff; margin-right: 20px; white-space: nowrap; }
.toolbar button {
    padding: 6px 16px;
    border: 1px solid #0f3460;
    background: #0f3460;
    color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.toolbar button:hover { background: #1a5276; border-color: #00d4ff; }
.toolbar button.active { background: #e74c3c; border-color: #e74c3c; }
.toolbar button.run-btn { background: #27ae60; border-color: #27ae60; }
.toolbar button.run-btn:hover { background: #2ecc71; }
.toolbar button.run-btn.running { background: #e74c3c; border-color: #e74c3c; }
.toolbar .separator { width: 1px; height: 28px; background: #0f3460; }
.toolbar .info { font-size: 12px; color: #888; margin-left: auto; }

/* 主体布局 */
.main-container { display: flex; flex: 1; overflow: hidden; }

/* 左侧元件面板 */
.component-panel {
    width: 200px;
    background: #16213e;
    border-right: 2px solid #0f3460;
    overflow-y: auto;
    flex-shrink: 0;
}
.panel-section { padding: 8px; }
.panel-section h3 { font-size: 12px; color: #00d4ff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.component-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 4px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    border-radius: 4px;
    cursor: grab;
    transition: all 0.2s;
    font-size: 13px;
}
.component-item:hover { border-color: #00d4ff; background: #0f3460; }
.component-item:active { cursor: grabbing; }
.component-icon { width: 32px; height: 24px; display: flex; align-items: center; justify-content: center; }
.component-icon svg { width: 32px; height: 24px; }

/* 画布区域 */
.canvas-container { flex: 1; position: relative; overflow: hidden; background: #1a1a2e; }
#circuitCanvas { position: absolute; top: 0; left: 0; }

/* 右侧属性面板 */
.property-panel {
    width: 220px;
    background: #16213e;
    border-left: 2px solid #0f3460;
    padding: 12px;
    overflow-y: auto;
    flex-shrink: 0;
}
.property-panel h3 { font-size: 13px; color: #00d4ff; margin-bottom: 12px; }
.prop-group { margin-bottom: 12px; }
.prop-group label { display: block; font-size: 11px; color: #888; margin-bottom: 4px; }
.prop-group input, .prop-group select {
    width: 100%;
    padding: 6px 8px;
    background: #1a1a2e;
    border: 1px solid #0f3460;
    color: #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
}
.prop-group input:focus, .prop-group select:focus { outline: none; border-color: #00d4ff; }
.prop-actions { display: flex; gap: 8px; margin-top: 12px; }
.prop-actions button { flex: 1; padding: 6px; font-size: 12px; border: 1px solid #0f3460; background: #0f3460; color: #e0e0e0; border-radius: 4px; cursor: pointer; }
.prop-actions button:hover { border-color: #00d4ff; }
.prop-actions button.delete { background: #922; border-color: #c33; }
.prop-actions button.delete:hover { background: #c33; }

/* 仿真数据面板 */
.sim-data { margin-top: 16px; border-top: 1px solid #0f3460; padding-top: 12px; }
.sim-data h3 { color: #27ae60; }
.sim-item { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; border-bottom: 1px solid #0f3460; }
.sim-item .label { color: #888; }
.sim-item .value { color: #00d4ff; font-family: monospace; }

/* 状态栏 */
.status-bar {
    background: #0f3460;
    padding: 4px 16px;
    font-size: 11px;
    color: #888;
    display: flex;
    gap: 20px;
    flex-shrink: 0;
}
.status-bar .status-item { display: flex; gap: 6px; }
.status-bar .status-item span:first-child { color: #666; }

/* 右键菜单 */
.context-menu {
    position: fixed;
    background: #16213e;
    border: 1px solid #0f3460;
    border-radius: 4px;
    padding: 4px 0;
    min-width: 160px;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.context-menu .menu-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
.context-menu .menu-item:hover { background: #0f3460; }
.context-menu .menu-item.danger { color: #e74c3c; }
.context-menu .menu-divider { height: 1px; background: #0f3460; margin: 4px 0; }

/* 提示框 */
.tooltip {
    position: fixed;
    background: #0f3460;
    color: #e0e0e0;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1001;
    display: none;
    max-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1a5276; }
</style>
</head>
<body>

<div class="toolbar">
    <h1>⚡ 电路仿真器</h1>
    <button id="btnWire" onclick="setMode('wire')">🔗 连线</button>
    <button id="btnSelect" onclick="setMode('select')" class="active">🖱️ 选择</button>
    <div class="separator"></div>
    <button class="run-btn" id="btnRun" onclick="toggleSimulation()">▶ 运行仿真</button>
    <button onclick="clearAll()">🗑️ 清空</button>
    <button onclick="exportCircuit()">💾 导出</button>
    <button onclick="importCircuit()">📂 导入</button>
    <div class="separator"></div>
    <button onclick="undoAction()">↩ 撤销</button>
    <button onclick="redoAction()">↪ 重做</button>
    <span class="info" id="modeInfo">模式: 选择</span>
</div>

<div class="main-container">
    <!-- 左侧元件面板 -->
    <div class="component-panel">
        <div class="panel-section">
            <h3>📦 电源</h3>
            <div class="component-item" draggable="true" data-type="dc_source">
                <div class="component-icon">
                    <svg viewBox="0 0 32 24"><line x1="0" y1="12" x2="10" y2="12" stroke="#00d4ff" stroke-width="2"/><line x1="22" y1="12" x2="32" y2="12" stroke="#00d4ff" stroke-width="2"/><line x1="12" y1="4" x2="12" y2="20" stroke="#00d4ff" stroke-width="3"/><line x1="20" y1="8" x2="20" y2="16" stroke="#00d4ff" stroke-width="2"/></svg>
                </div>
                <span>直流电源</span>
            </div>
            <div class="component-item" draggable="true" data-type="ac_source">
                <div class="component-icon">
                    <svg viewBox="0 0 32 24"><line x1="0" y1="12" x2="8" y2="12" stroke="#ff6b6b" stroke-width="2"/><circle cx="16" cy="12" r="8" fill="none" stroke="#ff6b6b" stroke-width="1.5"/><path d="M11 12 Q13 6 16 12 Q19 18 21 12" fill="none" stroke="#ff6b6b" stroke-width="1.5"/><line x1="24" y1="12" x2="32" y2="12" stroke="#ff6b6b" stroke-width="2"/></svg>
                </div>
                <span>交流电源</span>
            </div>
            <div class="component-item" draggable="true" data-type="ground">
                <div class="component-icon">
              .........完整代码请登录后点击上方下载按钮下载查看