<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.all{
width: 300px;
margin: 100px auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="all">
<p>You want to say : <span></span> !<p>
<input type="text" size="15"class="tet">
<button>Say</button>
</div>
<script type="text/javascript">
$(function(){
var arr,i=0;
var speed =null;
$("button").click(function(){
$("span").html("");
var tet = $("input").val();
arr = tet.split("");
i=0;
speed = setInterval(fun,500);
function fun(){
if(i>arr.length){
clearInterval(speed);
}
$("span").append(arr[i]);
i++;
console.log(i);
}
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.all{
width: 300px;
margin: 100px auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="all">
<p>You want to say : <span></span> !<p>
<input type="text" size="15"class="tet">
<button>Say</button>
</div>
<script type="text/javascript">
$(function(){
var arr,i=0;
var speed =null;
$("button").click(function(){
$("span").html("");
var tet = $("input").val();
arr = tet.split("");
i=0;
speed = setInterval(fun,500);
function fun(){
if(i>arr.length){
clearInterval(speed);
}
$("span").append(arr[i]);
i++;
console.log(i);
}
});
});
</script>
</body>
</html>