<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "<input id='mytext' type='input' value='mytext'>" ).appendTo( "body" );
$( "<input id='myclick' type='button' value='++'>" ).appendTo( "body" );
$("#mytext").css({top:0, left: 0,position:'absolute'});
$("#myclick").css({top:50, left: 0,position:'absolute'});
let index = 0;
let res = "";
$("#myclick").click(function(){
let result = $("#mytext").val();
$("#mytext").hide();
$("#myclick").hide();
$( "<div id='myout'></div>" ).appendTo( "body" );
let interval = setInterval(function() {
if (res.length == result.length ) clearInterval(interval);
$("#myout").text(res);
res += result[index];
index++;
},500);
});
});
</script>
</head>
<body>
</body>
</html>
| 