js實現打字效果
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='text'></div> <script> var str = 'JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果JavaScript實現打字效果'; var i = 0; function typing(){ var divTyping = document.getElementById('text'); if (i <= str.length) { divTyping.innerHTML = str.slice(0, i++) + '_'; setTimeout('typing()', 200);//遞迴呼叫 } else{ divTyping.innerHTML = str;//結束打字,移除 _ 游標 } } typing(); </script> </body> </html>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1978/viewspace-2815634/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS + JS 實現打字機效果CSSJS
- 純CSS3屬性animation實現的打字效果CSSS3
- 從打字機效果的 N 種實現看JS定時器機制和前端動畫JS定時器前端動畫
- 仿金山打字效果
- js 實現程式碼雨效果JS
- ChatGPT 打字機效果原理ChatGPT
- JS實現彈幕效果(10.11—10.17)JS
- JavaScript 打字機效果詳解JavaScript
- jQuery打字機效果程式碼jQuery
- JS實現馬賽克圖片效果JS
- 原生JS實現輪播圖的效果JS
- 那些不用js也能實現的效果JS
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS
- SpringBoot+WebFlux透過流式響應實現類似ChatGPT的打字機效果Spring BootWebUXChatGPT
- 手寫一個ChatGPT打字效果ChatGPT
- JS和Css實現紅包雨的效果JSCSS
- [前端外掛] js返回頂部 效果實現前端JS
- css3動畫完成打字機效果CSSS3動畫
- JS實現輪播圖效果(有詳細註釋)JS
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- js利用H5的requestAnimationFrame()API實現動畫效果JSH5requestAnimationFrameAPI動畫
- 使用JS實現一個簡單的選項卡效果JS
- 利用HTML5,無JS實現各種互動效果HTMLJS
- PAT1033 舊鍵盤打字(java實現)Java
- 實現聚焦效果
- 如何不使用js實現滑鼠hover彈出選單效果JS
- 原生JS實現拋物線動畫以及動態模糊效果JS動畫
- 前端教程之Intro.js輕鬆實現新手引導效果前端JS
- 【動畫進階】類 ChatGpt 多行文字打字效果動畫ChatGPT
- css 實現打分效果CSS
- webgl實現火焰效果Web
- webgl實現故障效果Web
- canvas實現波浪效果Canvas
- 用D3.js 十分鐘實現字元跳動效果JS字元
- 短視訊app原始碼,實現原生js圖片預覽效果APP原始碼JS
- Three.js 火焰效果實現艾爾登法環動態logo ?JSGo
- 使用Three.js實現神奇的3D文字懸浮效果JS3D