簡單的 js控制逐步顯示文字輸出

時間 2019-12-07

原文原文鏈接

惡趣味發做，寫篇博客壓壓驚
今天清理chrome書籤，忽然就點到了一個關於知乎五週年的網頁，這幫程序員的腦子真有趣，就算是保存一年後再看也仍是以爲好有趣，下邊是一個截圖javascript

這個網頁展現了一個相似ide接口的小窗口，文字逐步輸入，而且還伴隨一些有點炫的css動畫，爲我的生成專屬數據。固然這個展現還包括了其餘一些數據的傳輸啦，特殊效果（相似觸發一個標籤的js回調啦），css那個一堆波浪的動畫啦等等一些有意思的，這些暫時無論，咱們今天就來看看這個逐步顯示的文字是怎麼作到的，我首先想到的就是作一個簡單的demo
因爲沒有讀過這個網頁的源碼因此不保證思路相同，因此作法很簡單就是：
把一段文字用定時器回顯到網頁上，
最後有一個一閃一閃的遊標，那個是須要單獨拿出來的作一個定時器的，下邊給出代碼參考：css

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>逐個顯示</title> 
<style type="text/css">
#fuck{
    visibility:visible;
}
</style>


<body> 
<div id="content" 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^html