recherche

Maison >interface Web >js tutoriel >Utilisez Javascript pour afficher automatiquement les compétences text_javascript de la page Web

Utilisez Javascript pour afficher automatiquement les compétences text_javascript de la page Web

WBOY
WBOYoriginal
2016-05-16 15:48:22975parcourir

Utilisez JavaScript pour générer automatiquement le texte de la page Web. Deux fonctions, setTimeout(), récursion et String.substring(), sont utilisées pour réaliser cette fonction. Le code d'implémentation est partagé avec tout le monde ci-dessous.

L'effet est comme celui d'une dactylo qui tape.

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus&reg;">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 </head>
 <body bgcolor="#ccc" onload="printer();">
  <h2 align="center">文本自动输出</h2>
  <br>
  <br>
  <hr width="400" color="black">
  <br>
 <form align="center">
  <textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
 </form>
 </body>
 <script type="text/javascript">
 
  //获取textarea对象
  var text=document.getElementById("text");
  //要输出的内容
  var str=" 传统的HTML语言不能开发交互式的动态网页，而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言，通过把她和HTML语言相互结合起来，能够实现实时的动态网页特效，这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
  var pos=0;
  //利用递归和setTimeout()实现文字输出
  function printer(){
   text.value=str.substring(0,pos)+"|";
   //判断是否到达结尾.如果是则一秒后再来一遍.
   if(pos++>str.length){
    pos=0;
    setTimeout("printer()",1000);
   }else{
    setTimeout("printer()",50);
   }
  }
 </script>
 </html>

Le code ci-dessus représente l'intégralité du contenu de cet article sur l'utilisation de javascript pour générer automatiquement le texte d'une page Web. J'espère qu'il vous plaira.

Déclaration：
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
Article précédent：Explorez les paramètres Rest et les valeurs par défaut des paramètres​​dans les connaissances JavaScript_BasicArticle suivant：Explorez les paramètres Rest et les valeurs par défaut des paramètres​​dans les connaissances JavaScript_Basic

Articles Liés

Voir plus