Skip to content

请问怎么调节打字速度呢？ (Run ID: coffeedeveloper_typing.js_issue_8_02cf96bc) #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

请问怎么调节打字速度呢？ (Run ID: coffeedeveloper_typing.js_issue_8_02cf96bc) #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

引入相关文件

Expand All @@ -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();
Expand All @@ -48,7 +50,6 @@

### todo

- 回退删除效果
- 块状元素的鼠标闪烁输入效果
- 放入`bower`包管理，方便引用

Expand All @@ -60,7 +61,9 @@

- [`pause`](#pause)

- [`resume`]('#resume')
- [`resume`](#resume)

- [`setBackspaceMode`](#setBackspaceMode)

<a name="start" />
start:开始打印文字
Expand All @@ -84,6 +87,14 @@ resume:恢复打印
typing.resume();
```

<a name="setBackspaceMode" />
setBackspaceMode:切换打字和回退模式

```js
typing.setBackspaceMode(true); // 开启回退模式
typing.setBackspaceMode(false); // 关闭回退模式
```


```html
<div>
Expand All @@ -94,11 +105,14 @@ typing.resume();
```
### 更新记录

- 2.1
- 增加`backspaceDelay`参数，可以单独设置回退速度
- 增加`setBackspaceMode`方法，用于切换打字和回退模式
- 1.4
- 增加`UMD`模块加载
- 1.3
- 增加打印完成后的回调函数
- 1.2
- 移除对`es5-shim`的依赖
- 1.1
- 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
- 修复IE8会报错的bug(`Array.prototype.slice`改为用`for`)
97 changes: 97 additions & 0 deletions demo/demo3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>typing.js backspace demo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<link rel="stylesheet" href="../typing.css">
<link rel="stylesheet" href="demo.css">
<script src="../typing.js"></script>
<style>
.controls {
margin: 20px 0;
}
.controls button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>打字速度和回退速度演示</h1>
<p>本演示展示了如何调节打字速度和回退速度</p>

<div class="controls">
<button id="startTyping" class="btn btn-primary">开始打字</button>
<button id="startBackspace" class="btn btn-danger">开始回退</button>
<button id="reset" class="btn btn-default">重置</button>
</div>

<div id="source" style="display: none;">
这是一段用于演示打字速度和回退速度的文本。您可以通过设置delay和backspaceDelay参数来调整打字和回退的速度。
</div>

<div id="output-wrap">
<span id="output"></span>
<span class="typing-cursor">|</span>
</div>
</div>
</div>
</div>

<script type="text/javascript">
// 初始化typing对象，设置不同的打字速度和回退速度
var typing = new Typing({
source: document.getElementById('source'),
output: document.getElementById('output'),
delay: 100, // 打字速度：100毫秒
backspaceDelay: 50, // 回退速度：50毫秒（比打字速度快）
done: function() {
console.log('打字完成');
}
});

// 获取按钮元素
var startTypingBtn = document.getElementById('startTyping');
var startBackspaceBtn = document.getElementById('startBackspace');
var resetBtn = document.getElementById('reset');

// 开始打字
startTypingBtn.addEventListener('click', function() {
typing.setBackspaceMode(false); // 设置为正常打字模式
typing.start();
});

// 开始回退
startBackspaceBtn.addEventListener('click', function() {
typing.setBackspaceMode(true); // 设置为回退模式

// 获取当前输出的文本
var outputText = document.getElementById('output').textContent;

// 清空输出
document.getElementById('output').textContent = '';

// 创建一个临时的source元素
var tempSource = document.createElement('div');
tempSource.textContent = outputText;

// 更新typing对象的source
typing.source = tempSource;

// 开始打字（实际上是回退，因为我们设置了回退模式）
typing.start();
});

// 重置
resetBtn.addEventListener('click', function() {
document.getElementById('output').textContent = '';
typing.source = document.getElementById('source');
typing._stop = true;
});
</script>
</body>
</html>
13 changes: 11 additions & 2 deletions typing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {};
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -114,4 +123,4 @@
Typing.version = '2.1';

return Typing;
}));
}));
2 changes: 1 addition & 1 deletion typing.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.