You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
10 KiB
294 lines
10 KiB
<!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> |