From 1d01c16529108668d8ce330763c872189248083b Mon Sep 17 00:00:00 2001 From: "agentfarmx[bot]" <198411105+agentfarmx[bot]@users.noreply.github.com> Date: Thu, 20 Mar 2025 09:24:48 +0000 Subject: [PATCH] feat: add backspace functionality and typing speed control The commit adds a backspace mode with configurable delay speed, new demo page, and proper documentation for the new features in version 2.1. --- README.md | 24 +++++++++--- demo/demo3.html | 97 +++++++++++++++++++++++++++++++++++++++++++++++++ typing.js | 13 ++++++- typing.min.js | 2 +- 4 files changed, 128 insertions(+), 8 deletions(-) create mode 100644 demo/demo3.html diff --git a/README.md b/README.md index ef7657f..953d4fd 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ # 史上最华丽的打字效果JS插件 -### 当前版本**1.4** +### 当前版本**2.1** [Demo](http://coffeedeveloper.github.io/typing.js/demo.html) [Demo2](http://coffeedeveloper.github.io/typing.js/demo2.html) +[Demo3 - 打字和回退速度演示](http://coffeedeveloper.github.io/typing.js/demo3.html) 引入相关文件 @@ -23,7 +24,8 @@ var typing = new Typing({ source: document.getElementById('source'), output: document.getElementById('output'), - delay: 80, + delay: 80, // 打字速度，单位：毫秒 + backspaceDelay: 40, // 回退速度，单位：毫秒，不设置则与打字速度相同 done: function() {} //完成打印后的回调事件 }); typing.start(); @@ -48,7 +50,6 @@ ### todo -- 回退删除效果 - 块状元素的鼠标闪烁输入效果 - 放入`bower`包管理，方便引用 @@ -60,7 +61,9 @@ - [`pause`](#pause) -- [`resume`]('#resume') +- [`resume`](#resume) + +- [`setBackspaceMode`](#setBackspaceMode) start:开始打印文字 @@ -84,6 +87,14 @@ resume:恢复打印 typing.resume(); ``` + +setBackspaceMode:切换打字和回退模式 + +```js +typing.setBackspaceMode(true); // 开启回退模式 +typing.setBackspaceMode(false); // 关闭回退模式 +``` + ```html
@@ -94,6 +105,9 @@ typing.resume(); ``` ### 更新记录 +- 2.1 + - 增加`backspaceDelay`参数，可以单独设置回退速度 + - 增加`setBackspaceMode`方法，用于切换打字和回退模式 - 1.4 - 增加`UMD`模块加载 - 1.3 @@ -101,4 +115,4 @@ typing.resume(); - 1.2 - 移除对`es5-shim`的依赖 - 1.1 - - 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`) + - 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`) \ No newline at end of file diff --git a/demo/demo3.html b/demo/demo3.html new file mode 100644 index 0000000..50c9ee0 --- /dev/null +++ b/demo/demo3.html @@ -0,0 +1,97 @@ + + + + + typing.js backspace demo + + + + + + + + +
+
+
+

打字速度和回退速度演示

+

本演示展示了如何调节打字速度和回退速度

+ +
+ + + +
+ + + +
+ + | +
+
+
+
+ + + + \ No newline at end of file diff --git a/typing.js b/typing.js index bbe7704..ddca0a1 100644 --- a/typing.js +++ b/typing.js @@ -14,12 +14,14 @@ this.source = opts.source; this.output = opts.output; this.delay = opts.delay || 120; + this.backspaceDelay = opts.backspaceDelay || this.delay; // Default to same as typing delay this.chain = { parent: null, dom: this.output, val: [] }; this._stop = true; + this._isBackspacing = false; // Flag to track if we're in backspace mode if (!(typeof this.opts.done == 'function')) this.opts.done = function() {}; } @@ -59,10 +61,17 @@ }, print: function (dom, val, callback) { + var currentDelay = this._isBackspacing ? this.backspaceDelay : this.delay; + setTimeout(function(){ dom.appendChild(document.createTextNode(val)); callback(); - }, this.delay); + }, currentDelay); + }, + + setBackspaceMode: function(isBackspacing) { + this._isBackspacing = isBackspacing; + return this; }, play: function (ele) { @@ -114,4 +123,4 @@ Typing.version = '2.1'; return Typing; -})); +})); \ No newline at end of file diff --git a/typing.min.js b/typing.min.js index 88ef0c7..9dacb5f 100644 --- a/typing.min.js +++ b/typing.min.js @@ -1 +1 @@ -(function(root,factory){if(typeof exports==="object"){module.exports=factory()}else if(typeof define==="function"&&define.amd){define("Typing",[],function($){return root.Typing=factory($)})}else{root.Typing=factory()}})(this,function(){function Typing(opts){this.opts=opts||{};this.source=opts.source;this.output=opts.output;this.delay=opts.delay||120;this.chain={parent:null,dom:this.output,val:[]};this._stop=true;if(!(typeof this.opts.done=="function"))this.opts.done=function(){}}Typing.fn=Typing.prototype={toArray:function(eles){var result=[];for(var i=0;i