Ausführliche Erklärung, wie man mit JavaScript einen Schreibmaschineneffekt erzielt-js-Tutorial-php.cn

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

伊谢尔伦

Freigeben： 2017-07-25 15:22:30

Original

1846 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!