純js實(shí)現(xiàn)打字機(jī)效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)打字機(jī)效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
應(yīng)用場(chǎng)景
用處不大,只是看到網(wǎng)上有類似的效果,寫(xiě)了四五十行看不懂的代碼,于是嘗試能不能簡(jiǎn)單的實(shí)現(xiàn)
html
<h2 id="text-box"></h2> <!--一行也是代碼--> css h2 { width: 800px; line-height: 40px; border-bottom: 1px solid; margin: 200px auto; font-size: 24px; } .animate { display: inline-block; padding: 0 5px; vertical-align: 3px; font-size: 20px; font-weight: normal; } .animate.on { animation: fade 1.5s infinite forwards; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
js
let textBox = $('#text-box'); let index = 0; let str = 'Welcome to my website!'; let len = str.length; function input() { textBox.html(str.substr(0, index) + '<span class="animate">|</span>'); setTimeout(function() { index++; if(index === len + 1) { $('.animate').addClass('on'); return; } input(); }, Math.random() * 600) console.log(index); } input();
實(shí)現(xiàn)原理
通過(guò)定時(shí)器結(jié)合字符串截取實(shí)現(xiàn)類似于打字機(jī)的頓挫感,并通過(guò)遞歸累加index。相當(dāng)于第1s時(shí),截取一個(gè)字節(jié),第二秒時(shí),截取兩個(gè)字節(jié),以此類推……定時(shí)器時(shí)間取隨機(jī)數(shù),模擬打字的停頓感更好。遞歸調(diào)用中加結(jié)束循環(huán)條件,結(jié)束之前啟動(dòng)動(dòng)畫(huà),模擬光標(biāo)的跳動(dòng)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
深入理解JavaScript系列(8) S.O.L.I.D五大原則之里氏替換原則LSP
本章我們要講解的是S.O.L.I.D五大原則JavaScript語(yǔ)言實(shí)現(xiàn)的第3篇,里氏替換原則LSP(The Liskov Substitution Principle )。2012-01-01js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法
這篇文章主要介紹了js實(shí)現(xiàn)字符串轉(zhuǎn)日期格式的方法,涉及javascript針對(duì)字符串與日期操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05網(wǎng)頁(yè)開(kāi)發(fā)中的容易忽略的問(wèn)題 javascript HTML中的table
最近在搞在線電子表格這個(gè)東西,下面的是使用中的一些知識(shí)技巧。2009-04-04javascript下使用Promise封裝FileReader
這篇文章主要介紹了javascript下使用Promise封裝FileReader,需要的朋友可以參考下2016-02-02Javascript?promise.all的用法介紹(簡(jiǎn)潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個(gè)Promise對(duì)象方法,可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise對(duì)象,最終返回一個(gè)數(shù)組,需要的朋友可以參考下2023-07-07Bootstrap導(dǎo)航條學(xué)習(xí)使用(一)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02又一款js時(shí)鐘!transform實(shí)現(xiàn)時(shí)鐘效果
又一款js時(shí)鐘!這篇文章主要為大家詳細(xì)介紹了transform實(shí)現(xiàn)的時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08