网页运行js和html代码的html代码

闲来无事,写俩页面巩固学习知识

运行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>

效果图

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇9 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒10 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript