闲来无事,写俩页面巩固学习知识 此项目已部署,访问地址如下: jinweizhe.netlify.app/
运行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;
// 清空结果区域
document.getElementById("result").innerText = "";
// 保存原始的 console.log 方法
var oldConsoleLog = console.log;
// 重写 console.log 方法，将输出重定向到结果区域
console.log = function(...args) {
oldConsoleLog(...args); // 保留原始输出
var formattedArgs = args.map(arg => {
if (typeof arg === 'object') {
return JSON.stringify(arg); // 如果是对象或数组，则转换为字符串
} else {
return arg;
}
});
document.getElementById("result").innerText += formattedArgs.join(" ") + "\n"; // 将输出添加到结果区域
};
try {
// 使用 eval 执行代码
eval(code);
} catch (error) {
// 捕获执行错误并显示在结果区域
document.getElementById("result").innerText += error.toString() + "\n";
}
// 恢复原始的 console.log 方法
console.log = oldConsoleLog;
});
</script>
</body>
</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">
<!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>
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html></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>
效果图
