js 在线编辑器

作者：爱我者我必爱* 发布日期:2025-06-22 浏览:89

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 在线编辑器</title>
    <style>
        #editor {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: auto;
        }
        #output {
            width: 100%;
            height: 200px;
            border: 1px solid #ccc;
            margin-top: 10px;
            padding: 10px;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>JS 在线编辑器</h1>
    <textarea id="editor" placeholder="在这里编写你的 JavaScript 代码..."></textarea>
    <button onclick="runCode()">运行代码</button>
    <div id="output"></div>

    <script>
        function runCode() {
            const editor = document.getElementById('editor');
            const output = document.getElementById('output');
            try {
                // 使用 eval 执行用户输入的 JavaScript 代码
                const result = eval(editor.value);
                // 如果有返回值，则显示在输出区域
                if (result !== undefined) {
                    output.textContent = result;
                } else {
                    output.textContent = '代码已执行，无返回值。';
                }
            } catch (error) {
                // 捕获并显示任何错误
                output.textContent = `错误: ${error.message}`;
            }
        }
    </script>
</body>
</html>

解释说明：

HTML 结构：
- textarea 用于输入 JavaScript 代码。
- button 触发代码执行。
- div 显示代码执行的结果或错误信息。
CSS 样式：
- 设置了编辑器和输出区域的基本样式，包括宽度、高度、边框等。
JavaScript 功能：
- runCode() 函数获取用户输入的代码，并使用 eval() 来执行它。
- 如果代码执行成功且有返回值，则将结果显示在输出区域；如果没有返回值，则提示“代码已执行，无返回值”。
- 如果代码执行过程中发生错误，则捕获错误并在输出区域显示错误信息。

这个示例提供了一个简单的在线 JavaScript 编辑器，用户可以在其中编写和运行 JavaScript 代码，并查看结果或错误信息。

上一篇：js markdown编辑器

下一篇：js 代码编辑器