方法1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script>
var str =
" 今天天气真好,阳光正好,让我们一起到老!"
var i = 0;
function demoTest() {
var demo= document.getElementById('demo')
if (i <= str.length) {
demo.innerHTML = str.slice(0, i++) + "-";
setTimeout("demoTest()", 100)
} else {
demo.innerHTML = str;
}
}
demoTest();
</script>
</body>
</html>
方法2:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<style >
div{
width: 800px;
height: 30px;
color: black;
}
</style>
<body>
<div id = "test"></div>
<script >
var text = "今天天气真好,阳光正好,让我们一起到老!";
var num = text.length;
var i =0;
function show() {
var shower = text.substr(0,i);
document.getElementById("test").innerHTML = shower;
i++;
if(i + 1 >= num){
clearInterval("done");
}
}
var done=setInterval("show()",500);
</script>
</body>
</html>