前一段時間找工作做網頁簡歷,想實現打字機的效果。按理說像打字機這種動畫效果的實現首選是jquery，畢竟jquery還是以操作dom為主，而vue是資料驅動，但是jquery並沒有能狗滿足我設想的功能的外掛程式，又偷懶不想自己實現雙向繫結，只好自己用vue實現。**寫的不是很漂亮，希望大家不喜勿噴，這裡只是提供乙個思路。最終效果：
i『m bypunk!
i『m looking for a job.
i『m a front-end programmer.
i『m coding the web…
以上四句話迴圈重複，以打字機的效果顯示輸入和刪除，因為前面的i『m是相同的，所以只對後面的內容加以修改。
1.事先定義好字串str：str='by punk!'，使用陣列的splite方法將str分解成由字母組成的陣列。
2.利用for迴圈，每100毫秒向陣列裡push乙個新的字母，利用vue的雙向繫結，資料更新帶動檢視更新。
3.在容納字母的div後寫乙個豎槓「|」並加上不斷閃爍的動畫，模擬打字機游標。
4.在每次push的時候，判斷當前的索引i是否是陣列的最後乙個元素，如果是，則在2秒後開始清除。
5.「刪除」具體實現跟「輸入」剛好相反，每200毫秒從陣列從pop出最後一項。
6.使用watch鉤子函式實現四句話的迴圈重複。
具體**如下：
class="typer">
class="typer-content">
class="typer-static">i'm p>
class="typer-dynamic">
class="cut">
class="word"
v-for="(letter,index) in words"
:key="index">
}span>
span>
class="typer-cursor">
span>
p>
div>
div>
template>
export default
},watch:
else
if(this.order%4==2)
else
if(this.order%4==3)
else}},
mounted(),
methods:
},//開始刪除的效果動畫
back()
},//輸入字母
write(i),2000);}}
},//擦掉(刪除)字母
wipe(i),300);}}
},},
}script>
scoped
lang="less">
@thepink:#e84d49;
.typer
.typer
.typer-content
.typer-dynamic
.cut
.typer-cursor
style>
JQ實現打字機效果
目錄 一 前言 二 效果圖 三 本篇部落格記錄一下基於jquery實現的打字機效果 感興趣的可以一起學習學習。將下面 複製到html檔案中即可預覽效果。documenttitle head 這是一段打字機效果的文字 div script function else ele.html str.subs...
用js實現打字機效果
1.難得有點時間，回憶下古詩文，順便練習下js，實現下打字機效果 春江花月夜 張若虛 唐 春江潮水連海平，海上明月共潮生。灩灩隨波千萬里，何處春江無月明！江流宛轉繞芳甸，月照花林皆似霰 空裡流霜不覺飛，汀上白沙看不見。江天一色無纖塵，皎皎空中孤月輪。江畔何人初見月？江月何年初照人？人生代代無窮已，江...
java實現打字機效果的程式
audioclip hit,cr,ding boolean alreadyrun false,soundon false,loop false color bgcolor color.lightgray,textcolor color.black font font image offscreen,...