Heim > Artikel > Web-Frontend > Ausführliche Erklärung, wie man mit JavaScript einen Schreibmaschineneffekt erzielt

Ausführliche Erklärung, wie man mit JavaScript einen Schreibmaschineneffekt erzielt

伊谢尔伦Original: 2017-07-25 15:22:301833Durchsuche

JavaScript-Schreibmaschineneffekt
Beispiel 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>

Beispiel 2 (kompatibel mit 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>

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit JavaScript einen Schreibmaschineneffekt erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung, wie JavaScript bestimmt, ob Cookies aktiviert werden und Cookie-Codes ausgeführt werdenNächster Artikel：Detaillierte Erläuterung, wie JavaScript bestimmt, ob Cookies aktiviert werden und Cookie-Codes ausgeführt werden

In Verbindung stehende Artikel

Mehr sehen