Typewriter effect based on jQuery

2021-07-12 04:20:54
OfStack
Without saying much, please look at the example code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="keyword" content="">
<meta name="description" content="">
</head>
<body>
<div class="autotype" id="autotype">
 <p>1 The rain has trapped me here </p>
 <br/>
 <p> Your gentle expression </p>
 <p> It will make me sad </p>
 <br/>
 <p>6 The rain of the month is just ruthless to you ~</p>
</div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
 $.fn.autotype = function(){
  var $text = $(this);
  console.log('this',this);
  var str = $text.html();// Returns selected   Content of the element 
  var index = 0;
  var x = $text.html('');
  //$text.html() And $(this).html('') Have a difference 
  var timer = setInterval(function(){
   //substr(index, 1)  Method extracts from the string from index Subscript-based 1 Characters of 
   var current = str.substr(index, 1);
   if(current == '<'){
   //indexOf()  Method returns ">" The first occurrence in a string. 
    index = str.indexOf('>', index) + 1;
   }else{
    index ++ ;
   }
   //console.log(["0 To index Characters under subscript ",str.substring(0, index)],[" Symbol ",index & 1 ? '_': '']);
   //substring()  Method is used to extract the character between two specified subscripts in a string 
   $text.html(str.substring(0, index) + (index & 1 ? '_': ''));
   if(index >= str.length){
    clearInterval(timer);
   }
  },100);
 };
 $("#autotype").autotype();
</script>
</body>
</html>