文字指定时间间隔，逐渐显现所有文字。
一日，看到一官网首页有个文字渐显，感觉和手写上去一样，很是炫酷。F12发现不是动画，于是研究了下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐显</title>
</head>
<body>
<div style="font-family:宋体" id="append"></div>
<script>
var append = document.getElementById("append");
var str1 = ‘你好世界，世界那么大，我好想去看看!!‘; //要显现的文字
var array1 = str1.split(‘‘); //将文字切割成单个
console.log(array1);
var timer = setInterval(jianbian, 300); //设置时间间隔 循环周期为300毫秒，自行修改 ，每300毫秒执行一次jianbian方法
console.log(array1.length);
var i = 0; //进入方法
function jianbian() { //循环完毕撤销时间器
if (i == array1.length) {
clearInterval(timer);
console.log(‘取消时间器‘);
} else { //依次追加文字
append.innerHTML += array1[i];
console.log(i + ‘:‘ + array1[i]);
i++;
}
}
</script>
</body>
</html>
字体样式就不贴了。
总结：多看别人写的东西，终会成就那样的人。
原文地址：https://www.cnblogs.com/yangchas/p/9275001.html
时间： 2024-11-09 00:50:23