HTML implementiert die Funktion zur Anzeige von Effekten in Echtzeit

王林
Freigeben: 2020-08-14 17:06:14
nach vorne
4501 Leute haben es durchsucht

HTML implementiert die Funktion zur Anzeige von Effekten in Echtzeit

HTML realisiert die Funktion, den Effekt in Echtzeit anzuzeigen

(Empfohlenes Tutorial: HTML-Tutorial)

Mit dem folgenden Code können Sie eine neue Seite öffnen, um den Effekt unseres Codes anzuzeigen Das Texteingabefeld

<!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>
Nach dem Login kopieren

Wie unten gezeigt, ist der Text in der Tabelle im Eingabefeld der von uns eingegebene Inhalt. Der Effekt ist wie folgt:

HTML implementiert die Funktion zur Anzeige von Effekten in EchtzeitDas Bild unten zeigt den Anzeigeeffekt auf der neuen Seite

HTML implementiert die Funktion zur Anzeige von Effekten in EchtzeitÄhnlich können wir den Effekt auf der aktuellen Seite anzeigen. Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Der Effekt ist wie folgt:

HTML implementiert die Funktion zur Anzeige von Effekten in Echtzeit Effektanzeige:

Das obige ist der detaillierte Inhalt vonHTML implementiert die Funktion zur Anzeige von Effekten in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage