Maison > interface Web > tutoriel HTML > HTML implémente la fonction de visualisation des effets en temps réel

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

王林
Libérer: 2020-08-14 17:06:14
avant
4589 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

Affichage de l'effet :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal