ホームページ > 記事 > ウェブフロントエンド > HTMLでリアルタイムエフェクト表示機能を実装

HTMLでリアルタイムエフェクト表示機能を実装

王林転載: 2020-08-14 17:06:144501ブラウズ

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>

以下に示すように、テキスト入力ボックス内の表が入力した内容です

効果は次のとおりです。

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>效果展示：</h5>
  <div id="result">
  </div>
  </body>
</html>

効果は次のとおりです:

HTMLでリアルタイムエフェクト表示機能を実装

効果の表示:

HTMLでリアルタイムエフェクト表示機能を実装 #

以上がHTMLでリアルタイムエフェクト表示機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：HTMLでクリックしてファイルをダウンロードする機能を実装する方法次の記事：HTMLでクリックしてファイルをダウンロードする機能を実装する方法

続きを見る