1.初始化"打字創(chuàng)建"屬性

代碼類似于這樣:

<div id="demo"></div> <script>var typing = {_el: document.getElementById("demo"),_maxSpeed: 150,//最大輸入速度 _minSpeed: 20,//最小輸入速度_textList: ["js實(shí)現(xiàn)簡單的循環(huán)打字效果(思路分享)", "關(guān)愛單身狗成長協(xié)會(huì) ", "簡書地址:https://www.jianshu.com/u/f19e29243ff6","weibo:https://weibo.com/bay12580"],//輸入文字集合_listIndex: 0,//列表的索引_text: '',//當(dāng)前顯示的句子文字_tempText: "",//臨時(shí)句子截取文字_indexes: 0,//光標(biāo)索引_delSpeed: 10,//刪除文字速度_cursorText: "_",//光標(biāo)文字 _wait: 2000,//文子輸入完成后等待時(shí)間刪除_waitInput: 800,//等待n毫秒后開始輸入_timer: null,//定時(shí)器_isStop: true,//是否停止_cacheFun: null,//停止時(shí)函數(shù)記錄}; </script>

其實(shí)屬性也不難理解,這里就不詳細(xì)說明了~~

2.幾個(gè)基本函數(shù)

//略.... var typing = {//略.......cleanTimer() {//清除定時(shí)器if (this._timer) return;clearTimeout(this._timer);this._timer = null;},getRanSpeed() {//獲取隨機(jī)停止時(shí)間return Math.floor(Math.random() * (this._maxSpeed - this._minSpeed + 1)) + this._minSpeed;},getNowText(i) {//設(shè)置并獲取當(dāng)前文字this._indexes = typeof i == "number" ? i : this._indexes;this._tempText = this._text.substr(0, this._indexes);return this._tempText;},waiting(ms) {//等待函數(shù)return new Promise((resolve, reject) => {typing.cleanTimer();typing._timer = setTimeout(resolve, ms);})},render(hc) {//設(shè)置 ‘_el’的顯示文字this._el.innerHTML/*innerText*/ = this.getNowText() + (hc ? "" : this._cursorText);}}; //略....

函數(shù)測試:

//測試 typing._text = typing._textList[typing._listIndex]; typing.render();//一開始顯示 typing._cursorText 對應(yīng)字符 typing.waiting(typing._waitInput).then(()=>{//等待 typing._waitInput 毫秒后開始顯示文字typing._indexes ++;typing.render(); });

效果:

3.實(shí)現(xiàn)不斷打字效果

<div id="demo"></div> <script>var typing = {//略......loop() { //循環(huán)顯示if (typing._text.length <= typing._indexes) {//是顯示完成 typing.render(true);//輸出完成 隱藏結(jié)尾的光標(biāo)} else {typing.getNowText(typing._indexes + 1);//設(shè)置下一次顯示的文字typing.render();//顯示到頁面typing.waiting(typing.getRanSpeed()).then(typing.loop);//等待刪除}},start(){//開始 typing._text = typing._textList[typing._listIndex];//獲取應(yīng)該顯示的文字typing.waiting(typing._waitInput).then(typing.loop);//等等開始//typing.loop();//你也可以立即開始}};//測試typing.start(); </script>

效果:

4.實(shí)現(xiàn)不斷打字與刪除效果

<div id="demo"></div> <script>var typing = {//略.........backspace() { //循環(huán)刪除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 ++; //設(shè)置下一次顯示的文字索引 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;//記錄當(dāng)前顯示//略......},start() {if (!typing._isStop) return;//處于運(yùn)行狀態(tài)typing._isStop = false;if (typing._cacheFun) {//繼續(xù)上次未完成函數(shù)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);//以最長時(shí)間延時(shí)來確保執(zhí)行完全停止},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>

效果:

在線查看效果

總結(jié)

以上是生活随笔為你收集整理的js实现简单的循环打字效果(思路分享)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。