JS achieves the effect of simple keyboard typing

2020-06-01 08:12:55
OfStack
Process analysis in the form of code:

<html>
<head>
<title> Effect of typing </title>
<meta http-equiv="Content-Type" Content="text/html;charset=gb2312" />
<style type="text/css">
body{
  font-size:14px;
  font-color:#purple;
  font-weight:bolder;
}
</style>
</head>
<body>
 The latest content : <a id = "Hotnews" href="" target="_blank"> </a>  
<script language="javascript">
  var NewsTime = 2000;    // Stay time after each message appears in its entirety 
  var TextTime = 100;    // The amount of time between the words in each message 
  
  var newsi = 0;
  var txti = 0;
  var txttimer;   // call setInterval Is used to cancel the periodic execution of the function 
  var newstimer;
  
  var newstitle = new Array();    // Holds the title of each message as an array 
  var newshref = new Array();   // Holds the link to the information title as an array 
  
  newstitle[0] = " Welcome to my blog ";   // The text displayed on the page and the corresponding links 
  newshref[0] = "https://www.ofstack.com/guihailiuli/";
  
  newstitle[1] = "https://www.ofstack.com/guihailiuli/";
  newshref[1] = "https://www.ofstack.com/guihailiuli/";
  
  newstitle[2] = " Welcome to bloggarden ";
  newshref[2] = "https://www.ofstack.com";
  
  newstitle[3] = "ByeBye~~";
  newshref[3] = "https://www.ofstack.com";
  
  function shownew(){
    hwnewstr=newstitle[newsi];    // through newsi Pass, and display the contents of the array in turn 
    newslink=newshref[newsi];     // Displays the text's corresponding links in turn 
     
    if(txti>=hwnewstr.length){
      clearInterval(txttimer);  //1 Once it exceeds the length of the text to be displayed, clear the pair shownew() Periodic call 
      clearInterval(newstimer); 
      newsi++;   // Displays the bottom of the array 1 a 
      
      if(newsi>=newstitle.length){
        newsi = 0;  // when newsi Is greater than the number of information headers newsi Clear zero, start again from the first 1 A display 
      }
      newstimer = setInterval("shownew()",NewsTime);   // interval 2000ms Post recall shownew()
      txti = 0;  
      return;
    }
    clearInterval(txttimer);  
    document.getElementById("Hotnews").href = newslink;  
    document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1);   // Intercept the character from the first 1 A character to txti+1 A character 
    
    txti++;  // The text 1 All appear 
    txttimer = setInterval("shownew()",TextTime);   
  }
  shownew();

</script>
</body>
</html>
That's all for this article. I hope I can give you some help in learning javascript.