Home > Article > Web Front-end > Detailed explanation of how to achieve typewriter effect using JavaScript

Detailed explanation of how to achieve typewriter effect using JavaScript

伊谢尔伦Original: 2017-07-25 15:22:301832browse

JavaScript typewriter effect
Example 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>

Example 2 (compatible with 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>

The above is the detailed content of Detailed explanation of how to achieve typewriter effect using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how JavaScript determines whether to enable cookies and operate cookie codesNext article：Detailed explanation of how JavaScript determines whether to enable cookies and operate cookie codes

See more

Detailed explanation of how to achieve typewriter effect using JavaScript

Related articles