parent
c35011eece
commit
592ae96434
@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 10px;
|
||||
height: calc(100vh - 20px);
|
||||
}
|
||||
h1 {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.panel {
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
.compiler-panel {
|
||||
background-color: #e6f7ff;
|
||||
border-top: 5px solid #2196F3;
|
||||
}
|
||||
.interpreter-panel {
|
||||
background-color: #fff7e6;
|
||||
border-top: 5px solid #FF9800;
|
||||
}
|
||||
.platforms {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.platform {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
width: 30%;
|
||||
}
|
||||
.platform-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.code-container {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: 10px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.progress-container {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 20px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress {
|
||||
height: 100%;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.compiler-progress {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
.interpreter-progress {
|
||||
background-color: #FF9800;
|
||||
}
|
||||
.timer {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.output {
|
||||
margin: 10px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.comparison {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.highlight {
|
||||
animation: highlight 0.5s;
|
||||
}
|
||||
@keyframes highlight {
|
||||
0% { background-color: rgba(255, 255, 0, 0.5); }
|
||||
100% { background-color: transparent; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
<h1>编译型 vs 解释型语言对比</h1>
|
||||
|
||||
<!-- 编译型语言面板 -->
|
||||
<div class="panel compiler-panel">
|
||||
<h2>编译型语言 (C)</h2>
|
||||
|
||||
<div class="platforms">
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" class="platform-icon" alt="Windows">
|
||||
<div>Windows</div>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/2/2235.png" class="platform-icon" alt="macOS">
|
||||
<div>macOS</div>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/6124/6124995.png" class="platform-icon" alt="Linux">
|
||||
<div>Linux</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-container">#include <stdio.h>
|
||||
|
||||
int main() {
|
||||
// 模拟耗时操作
|
||||
for (int i = 0; i < 100000000; i++) {}
|
||||
printf("Hello, World!");
|
||||
return 0;
|
||||
}</div>
|
||||
|
||||
<button id="compile-btn" onclick="startCompilation()">编译</button>
|
||||
|
||||
<div id="compile-output" style="display:none;">
|
||||
<div class="output">生成可执行文件: program.exe (Windows)</div>
|
||||
<div class="output">生成可执行文件: program.app (macOS)</div>
|
||||
<div class="output">生成可执行文件: program (Linux)</div>
|
||||
|
||||
<button id="run-compiled-btn" onclick="runCompiledCode()">执行</button>
|
||||
|
||||
<div class="timer" id="c-timer">执行时间: 0.000s</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress compiler-progress" id="c-progress" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output" id="c-result"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解释型语言面板 -->
|
||||
<div class="panel interpreter-panel">
|
||||
<h2>解释型语言 (Python)</h2>
|
||||
|
||||
<div class="platforms">
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" class="platform-icon" alt="Windows">
|
||||
<div>Windows</div>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/2/2235.png" class="platform-icon" alt="macOS">
|
||||
<div>macOS</div>
|
||||
</div>
|
||||
<div class="platform">
|
||||
<img src="https://cdn-icons-png.flaticon.com/512/6124/6124995.png" class="platform-icon" alt="Linux">
|
||||
<div>Linux</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-container"># 模拟耗时操作
|
||||
for i in range(100000000):
|
||||
pass
|
||||
print("Hello, World!")</div>
|
||||
|
||||
<button id="run-interpreter-btn" onclick="runInterpretedCode()">执行</button>
|
||||
|
||||
<div class="timer" id="python-timer">执行时间: 0.000s</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress interpreter-progress" id="python-progress" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output" id="python-result"></div>
|
||||
</div>
|
||||
|
||||
<div class="comparison" id="comparison-result">
|
||||
<div id="efficiency-comparison"></div>
|
||||
<div id="crossplatform-comparison"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let cExecutionTime, pythonExecutionTime;
|
||||
|
||||
function startCompilation() {
|
||||
document.getElementById('compile-btn').disabled = true;
|
||||
const compileOutput = document.getElementById('compile-output');
|
||||
|
||||
// 模拟编译过程
|
||||
setTimeout(() => {
|
||||
compileOutput.style.display = 'block';
|
||||
compileOutput.classList.add('highlight');
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function runCompiledCode() {
|
||||
document.getElementById('run-compiled-btn').disabled = true;
|
||||
const startTime = performance.now();
|
||||
const progressBar = document.getElementById('c-progress');
|
||||
const timer = document.getElementById('c-timer');
|
||||
const result = document.getElementById('c-result');
|
||||
|
||||
// 模拟快速执行
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += 5;
|
||||
progressBar.style.width = progress + '%';
|
||||
timer.textContent = '执行时间: ' + ((performance.now() - startTime)/1000).toFixed(3) + 's';
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
cExecutionTime = (performance.now() - startTime)/1000;
|
||||
timer.textContent = '执行时间: ' + cExecutionTime.toFixed(3) + 's';
|
||||
result.textContent = 'Hello, World!';
|
||||
|
||||
updateComparison();
|
||||
}
|
||||
}, 20);
|
||||
}
|
||||
|
||||
function runInterpretedCode() {
|
||||
document.getElementById('run-interpreter-btn').disabled = true;
|
||||
const startTime = performance.now();
|
||||
const progressBar = document.getElementById('python-progress');
|
||||
const timer = document.getElementById('python-timer');
|
||||
const result = document.getElementById('python-result');
|
||||
|
||||
// 模拟较慢执行
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += 1;
|
||||
progressBar.style.width = progress + '%';
|
||||
timer.textContent = '执行时间: ' + ((performance.now() - startTime)/1000).toFixed(3) + 's';
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
pythonExecutionTime = (performance.now() - startTime)/1000;
|
||||
timer.textContent = '执行时间: ' + pythonExecutionTime.toFixed(3) + 's';
|
||||
result.textContent = 'Hello, World!';
|
||||
|
||||
updateComparison();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function updateComparison() {
|
||||
const comparison = document.getElementById('comparison-result');
|
||||
|
||||
if (cExecutionTime && pythonExecutionTime) {
|
||||
const speedRatio = (pythonExecutionTime / cExecutionTime).toFixed(1);
|
||||
document.getElementById('efficiency-comparison').innerHTML =
|
||||
`<strong>执行效率:</strong> 编译型语言执行速度是解释型的 ${speedRatio} 倍`;
|
||||
|
||||
document.getElementById('crossplatform-comparison').innerHTML =
|
||||
`<strong>跨平台:</strong> 编译型需要为每个平台单独编译，解释型同一代码跨平台运行`;
|
||||
|
||||
comparison.classList.add('highlight');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue