基于js實現逐步顯示文字輸出代碼實例
今天清理chrome書簽，突然就點到了一個關于 知乎五周年的網頁，這幫程序員的腦子真有趣，就算是保存一年后再看也還是覺得好有趣，下邊是一個截圖圖片描述
這個網頁展示了一個類似ide接口的小窗口，文字逐步輸入，并且還伴隨一些有點炫的css動畫，為個人生成專屬數據。當然這個展示還包括了其他一些數據的傳輸啦，特殊效果（類似觸發一個標簽的js回調啦），css那個一堆波浪的動畫啦等等一些有意思的，這些暫時不管，我們今天就來看看這個逐步顯示的文字是怎么做到的，我首先想到的就是做一個簡單的demo
由于沒有讀過這個網頁的源碼所以不保證思路相同，所以做法很簡單就是：
把一段文字用定時器回顯到網頁上，
最后有一個一閃一閃的游標，那個是需要單獨拿出來的做一個定時器的，下邊給出代碼參考：
<!DOCTYPE html> <html> <head> <meta charset=' utf-8'> <title>逐個顯示</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);//開始初始化基礎文本 var ocontent=document.getElementById('content'); var str='你猜我們會寫幾個字，不管我寫幾個字反正不會超過一行就對了'; 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>
這樣一個簡單的js控制回顯就完成了，是不是超級簡單？ ^V^
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Android如何加載Base64編碼格式圖片2. 詳解Android studio 動態fragment的用法3. 解決Android studio xml界面無法預覽問題4. 基于android studio的layout的xml文件的創建方式5. 圖文詳解vue中proto文件的函數調用6. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)7. 什么是python的自省8. 使用Android studio查看Kotlin的字節碼教程9. Vuex localStorage的具體使用10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現
網公網安備