通过javascript呈现打字机效果

来源：互联网发布：执行js文件编辑：程序博客网时间：2024/06/04 06:52

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.endIndexoptions.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.curIddom.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;}));

阅读全文

0 0