闲来无事,写俩页面巩固学习知识
运行js的页面代码如下
js
<!DOCTYPE html>
<html>
<head>
<title>JS Code Runner</title>
<style>
#container {
display: flex;
align-items: center;
justify-content: space-between;
}
#code-input {
width: 45%;
height: 400px;
}
#run-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#result {
width: 45%;
height: 400px;
background-color: #f1f1f1;
padding: 10px;
white-space: pre-wrap;
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
<textarea id="code-input" placeholder="在这里输入JS代码"></textarea>
<button id="run-button">运行</button>
<pre id="result"></pre>
</div>
<script>
document.getElementById("run-button").addEventListener("click", function() {
var code = document.getElementById("code-input").value;
var result = "";
// 保存原始的 console.log 方法
var oldConsoleLog = console.log;
// 重写 console.log 方法,将输出重定向到结果区域
console.log = function(...args) {
oldConsoleLog(...args); // 保留原始输出
document.getElementById("result").innerText += args.join(" ") + "\n"; // 将输出添加到结果区域
};
try {
// 使用 eval 执行代码
eval(code);
} catch (error) {
// 捕获执行错误并显示在结果区域
document.getElementById("result").innerText += error.toString() + "\n";
}
// 恢复原始的 console.log 方法
console.log = oldConsoleLog;
});
</script>
</body>
</html>
效果图
运行html的代码如下(点击运行右侧会出现网页效果,点击在新页面打开会打开新网页显示页面)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Code Editor</title>
<style>
#editor-container {
display: flex;
}
#html-input {
width: 50%;
height: 400px;
}
#preview {
width: 50%;
height: 400px;
border: 1px solid #ccc;
overflow: auto;
}
</style>
</head>
<body>
<div id="editor-container">
<textarea id="html-input"></textarea>
<iframe id="preview"></iframe>
</div>
<button id="run-button">运行</button>
<button id="open-button">在新页面中打开</button>
<script>
document.getElementById("run-button").addEventListener("click", function() {
var htmlCode = document.getElementById("html-input").value; // 获取输入框中的HTML代码
var previewFrame = document.getElementById("preview").contentWindow.document;
previewFrame.open();
previewFrame.write(htmlCode); // 在iframe中写入HTML代码
previewFrame.close();
});
document.getElementById("open-button").addEventListener("click", function() {
var htmlCode = document.getElementById("html-input").value; // 获取输入框中的HTML代码
var newWindow = window.open(); // 在新窗口中打开
newWindow.document.open();
newWindow.document.write(htmlCode); // 在新窗口中写入HTML代码
newWindow.document.close();
});
</script>
</body>
</html>
效果图