基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例
今天清理chrome書簽，突然就點(diǎn)到了一個(gè)關(guān)于 知乎五周年的網(wǎng)頁，這幫程序員的腦子真有趣，就算是保存一年后再看也還是覺得好有趣，下邊是一個(gè)截圖圖片描述
這個(gè)網(wǎng)頁展示了一個(gè)類似ide接口的小窗口，文字逐步輸入，并且還伴隨一些有點(diǎn)炫的css動(dòng)畫，為個(gè)人生成專屬數(shù)據(jù)。當(dāng)然這個(gè)展示還包括了其他一些數(shù)據(jù)的傳輸啦，特殊效果（類似觸發(fā)一個(gè)標(biāo)簽的js回調(diào)啦），css那個(gè)一堆波浪的動(dòng)畫啦等等一些有意思的，這些暫時(shí)不管，我們今天就來看看這個(gè)逐步顯示的文字是怎么做到的，我首先想到的就是做一個(gè)簡(jiǎn)單的demo
由于沒有讀過這個(gè)網(wǎng)頁的源碼所以不保證思路相同，所以做法很簡(jiǎn)單就是：
把一段文字用定時(shí)器回顯到網(wǎng)頁上，
最后有一個(gè)一閃一閃的游標(biāo)，那個(gè)是需要單獨(dú)拿出來的做一個(gè)定時(shí)器的，下邊給出代碼參考：
<!DOCTYPE html> <html> <head> <meta charset=' utf-8'> <title>逐個(gè)顯示</title> <style type='text/css'>#fuck{ visibility:visible;}</style><body> <div style='float:left'></div><span id='fuck'>|</span></body> <script type='text/javascript'> window.onload=function(){//首先要干的就是：先把后邊的span初始化好function toggleSpan(){ var HIDspan=document.getElementById('fuck'); HIDspan.style.visibility=(HIDspan.style.visibility=='visible')?'hidden':'visible';}setInterval(toggleSpan,500);//開始初始化基礎(chǔ)文本 var ocontent=document.getElementById('content'); var str='你猜我們會(huì)寫幾個(gè)字，不管我寫幾個(gè)字反正不會(huì)超過一行就對(duì)了'; var i=0; var flag=null; function done(){ if(i<str.length){ ocontent.innerHTML=str.substring(0,i+1); i=i+1; } else{ clearInterval(flag); } } flag=setInterval(done,200);}</script> </html>
這樣一個(gè)簡(jiǎn)單的js控制回顯就完成了，是不是超級(jí)簡(jiǎn)單？ ^V^
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 基于 Python 實(shí)踐感知器分類算法2. Python如何批量生成和調(diào)用變量3. ASP.Net Core對(duì)USB攝像頭進(jìn)行截圖4. ajax動(dòng)態(tài)加載json數(shù)據(jù)并詳細(xì)解析5. Python 中如何使用 virtualenv 管理虛擬環(huán)境6. python利用opencv實(shí)現(xiàn)顏色檢測(cè)7. 通過CSS數(shù)學(xué)函數(shù)實(shí)現(xiàn)動(dòng)畫特效8. ASP.Net Core(C#)創(chuàng)建Web站點(diǎn)的實(shí)現(xiàn)9. ASP.NET MVC實(shí)現(xiàn)橫向展示購物車10. windows服務(wù)器使用IIS時(shí)thinkphp搜索中文無效問題
網(wǎng)公網(wǎng)安備