js模拟原始打字机一段一段打印文字小程序

最新推荐文章于 2024-04-08 18:47:54 发布

麦草CMS

最新推荐文章于 2024-04-08 18:47:54 发布

阅读量441

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/jijz243292892/article/details/87886384

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head> 
<title>打字机</title>
<meta charset=utf-8>
<style type="text/css">
#div{
width: 600px;
margin:0 auto;
border: 1px solid red;
height: 400px;
padding: 20px;
line-height: 30px;
}
</style>
</head> 
  
<body> 
<div id="div">
</div>


<script language="javascript">
function  typer(id, strings/*文字段*/, sec/*时间秒*/){
	var div = document.getElementById(id);
	for(var i = 0, leng = strings.length; i < leng; i++){
		let text = document.createTextNode(strings[i]);
		let elem = document.createElement("div");
		elem.appendChild(text);
		setTimeout(function(){ div.appendChild(elem);}, 1000 * sec * (i + 1));
	}
}
typer("div", ["宇宙牌打字机", "打印俩鸡蛋", "O", "O"]/*文字段*/, 2/*时间秒*/);
</script>
</body> 
</html>