html實現即時效果檢視功能-html教學-PHP中文網

效果展示：

首頁

web前端

html教學

html實現即時效果檢視功能

王林

Aug 14, 2020 pm 05:06 PM

html

html實現即時效果檢視功能

html實現即時查看效果的功能

（推薦教學：html教學）

如下面程式碼，將能夠開啟新頁面查看我們在文字輸入域中的程式碼效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>M</title>
    <script type="text/javascript">
      window.onload = function () {
        console.log(document);
        var runBtn = document.getElementById(&#39;input&#39;);
        var runTextArea = document.getElementById(&#39;textarea&#39;);
        runBtn.onclick = function() {
          var oNewWin = window.open(&#39;about:blank&#39;);
          oNewWin.document.write(runTextArea.value); }
      }
    </script>
  </head>
  <body>
    <div>
      <input type=&#39;button&#39; id="input" value=&#39;运行&#39;/><br/>
      <textarea rows=&#39;10&#39; cols=&#39;30&#39; id="textarea" ></textarea>
    </div>
  </body>
</html>

登入後複製

如下圖，文字輸入框中的table就是我們輸入的內容

效果如下所示：

html實現即時效果檢視功能

如下圖為新頁面中的顯示效果

html實現即時效果檢視功能

#同樣的我們可以在目前頁面進行查看效果，程式碼如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>M</title>
    <script type="text/javascript">
      window.onload = function () {
        var runBtn = document.getElementById(&#39;input&#39;);
        var runTextArea = document.getElementById(&#39;textarea&#39;);
        var result = document.getElementById(&#39;result&#39;);
        runBtn.onclick = function() {
          result.innerHTML = runTextArea.value;
        }
      }
    </script>
  </head>
  <body>
    <div>
      <input type=&#39;button&#39; id="input" value=&#39;运行&#39;/><br/>
      <textarea rows=&#39;10&#39; cols=&#39;30&#39; id="textarea" ></textarea>
    </div>
    <h5 id="效果展示">效果展示：</h5>
  <div id="result">
  </div>
  </body>
</html>

登入後複製

效果如下：

html實現即時效果檢視功能