通过javascript呈现打字机效果

最新推荐文章于 2023-07-31 21:11:11 发布

宁波数联软件有限公司

最新推荐文章于 2023-07-31 21:11:11 发布

阅读量525

点赞数

分类专栏： js html 文章标签：用javascript实现打字机效果

本文链接：https://blog.youkuaiyun.com/kai_wei/article/details/72832337

版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍如何利用JavaScript创建逼真的打字机效果。通过详细的JS代码示例，展示了如何控制文字逐个显示，模拟打字过程，为网页增添互动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Printer Demo</title>
    <style>
        * {
            margin: 0;
            border: 0;
            padding: 0;
            font-family: "Courier New", Courier, monospace;
        }
        
        #show-board {
          
            height: 360px;
            color: #333;
            padding: 10px;
			font-family:"宋体";
			font-size:30px;
			
        }
    </style>
</head>

<body>

    <div id="window">
        <div id="title-bar"></div>
        <div id="show-board"></div>
    </div>

    <script src="javascript/printer.js"></script>
    <script>
        var str = '总得分：90.69分\n';
        str += '计算公式如下：\n';
        str += 'echo You can browse more from zhiqing.ingo\n';
        str += 'echo Thanks!\n';
        str += 'exit\n';
        Printer.init(str, {
            selector: 'show-board',
          
        }).print();
    </script>
</body>

</html>

js代码如下

(function(root, factory){
	if(typeof define === 'function' && define.amd){
		define([], factory);
	}else{
		root.Printer = factory(root);
	}
}(this, function(root){
	var Printer = {};
	Printer.printer = {"version": "0.0.1"};
	var init_options = {
		"speed" : 50,		//文字的速度
		"selector" : 'canvas',		//要打印到的标签的ID			
		"startIndex" : 0,		//从第几个字符开始打印
		"endIndex" : 0,		//打印到第几个字符结束
		"hasCur" : true,		//是否有光标
		"curId" : 'cur',		//光标的ID
		"curStr" : '_',		//光标字符
		"curStyle" : 'font-weight: bold;',	//光标的样式（CSS样式）
		"curSpeed" : 100,		//光标的速度（ms）
		"lnStr": ""
	};



	var str = "", options = init_options;
	var flwCurTimer, dom, curObj, reStr='', curSwitch,index=0;

	Printer.init = function(arg_str, arg_options){
		str = arg_str;
		for( var option in arg_options ){
			options[option] = arg_options[option];
		}
		dom = document.getElementById(options.selector);
		index = options.startIndex;
		options.endIndex = options.endIndex == 0 ? str.length : options.endIndex
		options.hasCur && flwCur();
		return this;
	}


	Printer.print = function(){	//打印函数
		for(var i=0; i<str.length; i++) {
			(function(index){
				setTimeout(function(){	
					if (str.charAt(index) === '\n'){
						reStr += '<br>' + options.lnStr;
					} else {
						reStr += str.charAt(index);
					}
					dom.innerHTML= options.lnStr + reStr
				}, options.speed * (index + 1))
			})(i);
		}

		setTimeout(function(){
			if(options.hasCur){
				var element = document.createElement("span");
				element.id = options.curId
				dom.appendChild(element);

				curObj = document.getElementById(options.curId);
				clearTimeout(flwCurTimer);
				setInterval(chCur, options.curSpeed);
			}
		}, options.speed * str.length)
	}

	function flwCur(){	//跟随光标
		dom.innerHTML += '<span id="'+options.curId+'" style="'+options.curStyle+'">'+options.curStr+'</span>';
		flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);
	}

	function chCur(){	//闪烁光标
		curObj.innerHTML = curSwitch ? options.curStr : "";
		curSwitch = !curSwitch
	}

	return Printer;
}));