HTML implémente la fonction de visualisation des effets en temps réel-tutoriel HTML-php.cn

HTML implémente la fonction de visualisation des effets en temps réel

王林

Libérer： 2020-08-14 17:06:14

avant

4614 Les gens l'ont consulté

HTML implémente la fonction de visualisation des effets en temps réel

html réalise la fonction d'effets de visualisation en temps réel

(tutoriel recommandé : tutoriel HTML)

Comme indiqué dans le code suivant, vous pourrez ouvrir une nouvelle page pour voir l'effet de notre code dans le champ de saisie de texte

<!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>

Copier après la connexion

Comme indiqué ci-dessous, le tableau dans la zone de saisie de texte est le contenu que nous saisissons

L'effet est le suivant :

HTML implémente la fonction de visualisation des effets en temps réel

L'image suivante montre l'effet d'affichage sur la nouvelle page

HTML implémente la fonction de visualisation des effets en temps réel

De même, on peut visualiser l'effet sur la page en cours, le code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

HTML implémente la fonction de visualisation des effets en temps réel