基于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è)簡單的demo
由于沒有讀過這個(gè)網(wǎng)頁的源碼所以不保證思路相同，所以做法很簡單就是：
把一段文字用定時(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 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);
//開始初始化基礎(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è)簡單的js控制回顯就完成了，是不是超級(jí)簡單？ ^V^
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中的雙感嘆號(hào)判斷。在網(wǎng)上查了些資料，他相當(dāng)于三元運(yùn)算符，返回boolean值2013-11-11
輸入自動(dòng)提示搜索提示功能的使用說明:sugggestion.txt
該js文件中的代碼實(shí)現(xiàn)了[輸入自動(dòng)搜索提示]功能,如百度、google搜索框中輸入一些字符會(huì)以下拉列表形式給出一些提示，提高了用戶體驗(yàn)2013-09-09
最近在寫位操作的時(shí)候突然想到了這個(gè)問題，突然想總結(jié)一下，交換變量值的問題可能使我們學(xué)習(xí)編程語言接觸到的比較早的邏輯問題，小伙伴或多或少會(huì)兩種解決的方法，本文提供了七種解決的方法，下面跟著小編來一起看看吧。2016-12-12
JavaScript canvas實(shí)現(xiàn)七彩太陽光暈效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)七彩太陽光暈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JavaScript獲得表單target屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)圖片偽異步上傳過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片偽異步上傳過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了使用rollup打包JS的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
mock.js模擬數(shù)據(jù)的實(shí)現(xiàn)
在沒有后端提供數(shù)據(jù)的情況下,前端人員在自己寫demo或者練手項(xiàng)目的時(shí)候可以使用mock.js來模擬數(shù)據(jù),本文主要介紹了mock.js模擬數(shù)據(jù)的實(shí)現(xiàn),感興趣的可以了解一下2023-11-11
基于layer.js實(shí)現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息
這篇文章主要介紹了基于layer.js實(shí)現(xiàn)收貨地址彈框選擇然后返回相應(yīng)的地址信息,需要的朋友可以參考下2017-05-05