1.初始化"打字创建"属性
代码类似于这样:
<div id="demo"></div>
<script>
var typing = {
_el: document.getElementById("demo"),
_maxSpeed: 150,//最大输入速度
_minSpeed: 20,//最小输入速度
_textList: ["js实现简单的循环打字效果(思路分享)",
"关爱单身狗成长协会 ",
"简书地址:https://www.jianshu.com/u/f19e29243ff6",
"weibo:https://weibo.com/bay12580"
],//输入文字集合
_listIndex: 0,//列表的索引
_text: '',//当前显示的句子文字
_tempText: "",//临时句子截取文字
_indexes: 0,//光标索引
_delSpeed: 10,//删除文字速度
_cursorText: "_",//光标文字
_wait: 2000,//文子输入完成后等待时间删除
_waitInput: 800,//等待n毫秒后开始输入
_timer: null,//定时器
_isStop: true,//是否停止
_cacheFun: null,//停止时函数记录
};
</script>
其实属性也不难理解,这里就不详细说明了~~
2.几个基本函数
//略....
var typing = {
//略.......
cleanTimer() {//清除定时器
if (this._timer) return;
clearTimeout(this._timer);
this._timer = null;
},
getRanSpeed() {//获取随机停止时间
return Math.floor(Math.random() * (this._maxSpeed - this._minSpeed + 1)) + this._minSpeed;
},
getNowText(i) {//设置并获取当前文字
this._indexes = typeof i == "number" ? i : this._indexes;
this._tempText = this._text.substr(0, this._indexes);
return this._tempText;
},
waiting(ms) {//等待函数
return new Promise((resolve, reject) => {
typing.cleanTimer();
typing._timer = setTimeout(resolve, ms);
})
},
render(hc) {//设置 ‘_el’的显示文字
this._el.innerHTML/*innerText*/ = this.getNowText() + (hc ? "" : this._cursorText);
}
};
//略....
函数测试:
//测试
typing._text = typing._textList[typing._listIndex];
typing.render();//一开始显示 typing._cursorText 对应字符
typing.waiting(typing._waitInput).then(()=>{//等待 typing._waitInput 毫秒后开始显示文字
typing._indexes ++;
typing.render();
});
效果:
3.实现不断打字效果
<div id="demo"></div>
<script>
var typing = {
//略......
loop() { //循环显示
if (typing._text.length <= typing._indexes) {//是显示完成
typing.render(true);//输出完成 隐藏结尾的光标
} else {
typing.getNowText(typing._indexes + 1);//设置下一次显示的文字
typing.render();//显示到页面
typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待删除
}
},
start(){//开始
typing._text = typing._textList[typing._listIndex];//获取应该显示的文字
typing.waiting(typing._waitInput).then(typing.loop);//等等开始
//typing.loop();//你也可以立即开始
}
};
//测试
typing.start();
</script>
效果:
4.实现不断打字与删除效果
<div id="demo"></div>
<script>
var typing = {
//略.........
backspace() { //循环删除
if (typing._indexes > 0) {
typing.waiting(typing._delSpeed).then(() => {//删除
// typing.getNowText(typing._indexes -1);
typing._indexes --;
typing.render();
typing.backspace();
});
} else {//删除完成
if (typing._listIndex >= typing._textList.length) typing._listIndex = 0;
typing._text = typing._textList[typing._listIndex];
typing._listIndex++;
typing.waiting(typing._waitInput).then(typing.loop);//等待输入
}
},
loop() {
if (typing._text.length <= typing._indexes) {//是显示完成
typing.render(true);//输出完成
typing.waiting(typing._wait).then(typing.backspace);//等待删除
} else {
// typing.getNowText(typing._indexes + 1);
typing._indexes ++; //设置下一次显示的文字索引
typing.render();//显示到页面
typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待删除
}
},
start() {//开始
typing.backspace();
}
};
//测试
typing.start();
</script>
效果:
5.添加暂停功能
<div id="demo"></div>
<script>
var typing = {
//略......
backspace() {
if (typing._isStop) return typing._cacheFun = typing.backspace;
//略......
},
loop() {
if (typing._isStop) return typing._cacheFun = typing.loop;//记录当前显示
//略......
},
start() {
if (!typing._isStop) return;//处于运行状态
typing._isStop = false;
if (typing._cacheFun) {//继续上次未完成函数
typing._cacheFun();
typing._cacheFun = null;
return;
}
typing.render("");
typing.cleanTimer();
typing.backspace();
},
restart() {
typing.stop();
typing._tempText = "";
typing._listIndex = 0;
typing._indexes = 0;
typing.render("");
typing._cacheFun = null;
typing.waiting(typing._wait).then(typing.start);//以最长时间延时来确保执行完全停止
},
stop() {
if (typing._isStop) return;
typing._isStop = true;
typing.cleanTimer();
}
};
typing.start();
</script>
<button onclick="typing.start()">开始</button>
<button onclick="typing.stop()">暂停</button>
<button onclick="typing.restart()">重新开始</button>
效果:
