快捷導(dǎo)航

基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例

更新時(shí)間：2020年04月02日 10:49:34 作者：白眉少俠

這篇文章主要介紹了基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

今天清理chrome書簽，突然就點(diǎn)到了一個(gè)關(guān)于知乎五周年的網(wǎng)頁(yè)，這幫程序員的腦子真有趣，就算是保存一年后再看也還是覺(jué)得好有趣，下邊是一個(gè)截圖圖片描述

這個(gè)網(wǎng)頁(yè)展示了一個(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í)不管，我們今天就來(lái)看看這個(gè)逐步顯示的文字是怎么做到的，我首先想到的就是做一個(gè)簡(jiǎn)單的demo

由于沒(méi)有讀過(guò)這個(gè)網(wǎng)頁(yè)的源碼所以不保證思路相同，所以做法很簡(jiǎn)單就是：

把一段文字用定時(shí)器回顯到網(wǎng)頁(yè)上，

最后有一個(gè)一閃一閃的游標(biāo)，那個(gè)是需要單獨(dú)拿出來(lái)的做一個(gè)定時(shí)器的，下邊給出代碼參考：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>逐個(gè)顯示</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);


//開(kāi)始初始化基礎(chǔ)文本
 var ocontent=document.getElementById("content");
 var str="你猜我們會(huì)寫幾個(gè)字，不管我寫幾個(gè)字反正不會(huì)超過(guò)一行就對(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: