基于JavaScript實(shí)現(xiàn)驚艷的打字機(jī)效果
先準(zhǔn)備一個(gè)Html的模版:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: black; color: white; } #switch-box { color: #0cc4fb; } </style> </head> <body> 我要成為 <span id="switch-box"></span> 高手 </body> </html>
在switch-box中實(shí)現(xiàn)打字效果,得利用js,首先定義一個(gè)字符串?dāng)?shù)組,用于在打字機(jī)中切換文字,然后定義一個(gè)函數(shù)將數(shù)組中的字放到內(nèi)容中,每次切換后索引+1,然后循環(huán)調(diào)用這個(gè)函數(shù),當(dāng)索引大于數(shù)組長(zhǎng)度的時(shí)候,把索引重新歸0
const stringArray = ['C++','Go','Java','Js','PHP'] let switch_box = document.getElementById('switch-box') // 定義數(shù)組索引 let index = 0 let delay = 500 let changeText = () => { switch_box.textContent = stringArray[index] index ++ if(index >= stringArray.length){ index = 0 } setTimeout(changeText,delay) } changeText()
這其實(shí)已經(jīng)能實(shí)現(xiàn)切換了,只是沒(méi)有打字效果,我們?cè)倮胘s,用于顯示一個(gè)個(gè)字符的顯示,利用substring切割字符,每次字符數(shù)量+1,當(dāng)切割全部的時(shí)候,就該執(zhí)行刪除了,所以應(yīng)該定義一個(gè)刪除的標(biāo)志,在刪除完之后,就應(yīng)該切換到下一個(gè)字符了。
下面是完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: black; color: white; } #switch-box { color: #0cc4fb; } </style> </head> <body> 我要成為 <span id="switch-box"></span> 高手 <script> const stringArray = ['C++','Go','Java','Js','PHP'] let switch_box = document.getElementById('switch-box') // 定義數(shù)組索引 let index = 0 let delay = 0 let charIndex = 0 // 刪除標(biāo)志 let isDelete = false let defaultDelay = 300 let waitDalay = 1000 let changeText = () => { switch_box.textContent = stringArray[index].substring(0,charIndex); if(!isDelete){ delay = defaultDelay charIndex ++ if(charIndex > stringArray[index].length){ // 當(dāng)charIndex已經(jīng)大于字符的長(zhǎng)度的時(shí)候,表示應(yīng)該執(zhí)行刪除動(dòng)畫(huà)了 isDelete = true delay = waitDalay } }else{ delay = defaultDelay charIndex -- if(charIndex < 1){ isDelete = false index ++ if(index >= stringArray.length){ index = 0 } } } setTimeout(changeText,delay) } changeText() </script> </body> </html>
最后補(bǔ)充下文字后的光標(biāo)閃爍效果
/*打字樣式光標(biāo)*/ #switch-box::after { content: "I"; font-size: 18px; display: inline-block; vertical-align: top; font-weight: lighter; animation: flicker .5s infinite; } /*光標(biāo)閃爍動(dòng)畫(huà)*/ @keyframes flicker { 0% { opacity: 0; } 100% { opacity: 1; } }
效果圖
到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)驚艷的打字機(jī)效果的文章就介紹到這了,更多相關(guān)JavaScript打字機(jī)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08限制textbox或textarea輸入字符長(zhǎng)度的JS代碼
textbox或textarea的輸入字符限制有很多方法,在本將為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-10-10JS通過(guò)分析userAgent屬性來(lái)判斷瀏覽器的類型及版本
JavaScript判斷瀏覽器類型一般有兩種辦法,一種是根據(jù)各種瀏覽器獨(dú)有的屬性來(lái)分辨,另 一種是通過(guò)分析瀏覽器的userAgent屬性來(lái)判斷的2014-03-03基于JavaScript實(shí)現(xiàn)彈出框效果
彈出框在網(wǎng)站頁(yè)面中是必不可少的一部分,今天借助腳本之家平臺(tái)給大家分享使用js實(shí)現(xiàn)簡(jiǎn)單的彈出框效果,感興趣的朋友一起學(xué)習(xí)吧2016-02-02