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>

效果:

在線查看效果

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。