Explication détaillée de la façon d'obtenir un effet de machine à écrire à l'aide de JavaScript-js tutoriel-php.cn

Explication détaillée de la façon d'obtenir un effet de machine à écrire à l'aide de JavaScript

伊谢尔伦

Libérer： 2017-07-25 15:22:30

original

1845 Les gens l'ont consulté

Effet machine à écrire JavaScript
Exemple 1

<html>
<title>JavaScript 打字机</title>
<head>
<style type="text/css">
 body{
  font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
  margin-top:0px;
  background-image:url(&#39;../../images/heading3.gif&#39;);
  background-repeat:no-repeat;
  padding-top:100px;
 }
 #myContent, #myContent blink{
  width:500px;
  height:200px;
  background:black;
  color: #00FF00;
  font-family:courier;
 } 
 blink{
  display:inline;
  
 }
 </style>
 <script type="text/javascript">
 var charIndex = -1;
 var stringLength = 0;
 var inputText;
 function writeContent(init){
  if(init){
   inputText = document.getElementById(&#39;contentToWrite&#39;).innerHTML;
  }
  if(charIndex==-1){
   charIndex = 0;
   stringLength = inputText.length;
  }
  var initString = document.getElementById(&#39;myContent&#39;).innerHTML;
  initStringinitString = initString.replace(/<SPAN.*$/gi,"");
    
  var theChar = inputText.charAt(charIndex);
  var nextFourChars = inputText.substr(charIndex,4);
  if(nextFourChars==&#39;<BR>&#39; || nextFourChars==&#39;<br>&#39;){
   theChar = &#39;<BR>&#39;;
   charIndex+=3;
  }
  initStringinitString = initString + theChar + "<SPAN id=&#39;blink&#39;>_</SPAN>";
  document.getElementById(&#39;myContent&#39;).innerHTML = initString;
  
  charIndexcharIndex = charIndex/1 +1;
  if(charIndex%2==1){
    document.getElementById(&#39;blink&#39;).style.display=&#39;none&#39;;
  }else{
    document.getElementById(&#39;blink&#39;).style.display=&#39;inline&#39;;
  }
      
  if(charIndex<=stringLength){
   setTimeout(&#39;writeContent(false)&#39;,150);
  }else{
   blinkSpan();
  }
 }
   
 var currentStyle = &#39;inline&#39;;
 function blinkSpan(){
  if(currentStyle==&#39;inline&#39;){
   currentStyle=&#39;none&#39;;
  }else{
   currentStyle=&#39;inline&#39;;
  }
  document.getElementById(&#39;blink&#39;).style.display = currentStyle;
  setTimeout(&#39;blinkSpan()&#39;,500);
    
 }
 </script>
  
<body>
  
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
 <!-- Put the typewriter content here-->
 sharejs.com
 Login : username<br>
 password : ******<br>
 Access is granted<br>
 <!-- End typewriter content -->
 </div>
 <script type="text/javascript">
 writeContent(true);
</script>
  
  
</body>
</html>

Copier après la connexion

Exemple 2 (compatible avec IE, FX)

<html>
<head>
<title>打字效果的带链接的新闻标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
最新内容：<a id="HotNews" href="" target="_blank"></a>
<script language="JavaScript">
var NewsTime = 2000; //每条新闻的停留时间
var TextTime = 50; //新闻标题文字出现等待时间，越小越快
  
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
  
var newnewstitle = new Array(); //新闻标题
var newnewshref = new Array(); //新闻链接
  
newstitle[0] = "javascript常用函数";
newshref[0] = "http://www.jb51.net/article/74365.htm";
  
newstitle[1] = "http://www.jb51.net/";
newshref[1] = "http://www.jb51.net/";
  
function shownew()
{
 var endstr = "_";
 hwnewstr = newstitle[newsi];
 newslink = newshref[newsi];
 if(txti==(hwnewstr.length-1)){endstr="";}
 if(txti>=hwnewstr.length){
 clearInterval(txttimer);
 clearInterval(newstimer);
 newsi++;
 if(newsi>=newstitle.length){
 newsi = 0
 }
 newstimer = setInterval("shownew()",NewsTime);
 txti = 0;
 return;
 }
 clearInterval(txttimer);
 document.getElementById("HotNews").href=newslink;
 document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
 txti++;
 txttimer = setInterval("shownew()",TextTime);
}
shownew();
</script>
</body>
</html>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée de la façon d'obtenir un effet de machine à écrire à l'aide de JavaScript