├── LICENSE
├── README.md
├── demo.html
├── index.html
├── javascript
└── printer.js
└── sample.png
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Zhiqing
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # js-printer
2 | 一个用于实现打字机效果的javascript库
3 | 演示地址：(http://zhiqing-lee.github.io/js-printer/)
4 |
5 | ## 重构
6 |
7 | 1. 使用闭包
8 | 2. 规范化
9 |
10 |
11 | ## Usage
12 | ```
13 | var printer = Printer(str, [options]);
14 | printer.print();
15 | ```
16 | or
17 |
18 | ```
19 | Printer(str, [options]).print();
20 | ```
21 |
22 | ## Options
23 | ```
24 | {
25 | "speed" : 50, //文字速度
26 | "selector" : 'canvas', //选择器
27 | "startIndex" : 0, //从第几个字符开始打印
28 | "endIndex" : 0, //打印到第几个字符结束
29 | "hasCur" : true, //是否显示光标
30 | "curId" : 'cur', //光标的ID
31 | "curStr" : '_', //光标字符
32 | "curStyle" : 'font-weight: bold;', //光标的样式（CSS样式）
33 | "curSpeed" : 100, //光标速度（ms）
34 | "lnStr": "" //行首字符
35 | };
36 | ```
37 |
38 | ## 效果：
39 |
40 | 
41 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Printer Demo
7 |
65 |
66 |
67 |
68 |
69 |
73 |
74 |
75 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Printer Demo
7 |
67 |
68 |
69 |
70 |
71 |
75 |
76 |
77 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/javascript/printer.js:
--------------------------------------------------------------------------------
1 | (function(root, factory){
2 | if(typeof define === 'function' && define.amd){
3 | define([], factory);
4 | }else{
5 | root.Printer = factory(root);
6 | }
7 | }(this, function(root){
8 | var Printer = {};
9 | Printer.printer = {"version": "0.0.1"};
10 | var init_options = {
11 | "speed" : 50, //文字的速度
12 | "selector" : 'canvas', //要打印到的标签的ID
13 | "startIndex" : 0, //从第几个字符开始打印
14 | "endIndex" : 0, //打印到第几个字符结束
15 | "hasCur" : true, //是否有光标
16 | "curId" : 'cur', //光标的ID
17 | "curStr" : '_', //光标字符
18 | "curStyle" : 'font-weight: bold;', //光标的样式（CSS样式）
19 | "curSpeed" : 100, //光标的速度（ms）
20 | "lnStr": ""
21 | };
22 |
23 |
24 |
25 | var str = "", options = init_options;
26 | var flwCurTimer, dom, curObj, reStr='', curSwitch,index=0;
27 |
28 | Printer.init = function(arg_str, arg_options){
29 | str = arg_str;
30 | for( var option in arg_options ){
31 | options[option] = arg_options[option];
32 | }
33 | dom = document.getElementById(options.selector);
34 | index = options.startIndex;
35 | options.endIndex = options.endIndex == 0 ? str.length : options.endIndex
36 | options.hasCur && flwCur();
37 | return this;
38 | }
39 |
40 |
41 | Printer.print = function(){ //打印函数
42 | for(var i=0; i'+options.curStr+'';
70 | flwCurTimer = setTimeout(flwCur, 1.5 * options.speed);
71 | }
72 |
73 | function chCur(){ //闪烁光标
74 | curObj.innerHTML = curSwitch ? options.curStr : "";
75 | curSwitch = !curSwitch
76 | }
77 |
78 | return Printer;
79 | }));
80 |
81 |
82 |
--------------------------------------------------------------------------------
/sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/early-return/js-printer/0fda9b1ce7c5d73f1f18b8a62580e5418cff751b/sample.png
--------------------------------------------------------------------------------