js+css實現(xiàn)打字效果
更新時間:2020年06月24日 10:09:47 作者:冷月葬殘花
這篇文章主要為大家詳細介紹了js+css打字效果的實現(xiàn)方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)打字效果的具體代碼,供大家參考,具體內(nèi)容如下
1.效果
2.源碼
<html> <head> <style type="text/css"> #myDiv{ display: inline-block; width:500px; height:300px; background-color:rgba(0,0,0,0.3); color:hsla(0,100%,70%,1); word-wrap:break-word; line-height:30px; letter-spacing:3px; padding-left:3px; text-indent:40px; border-radius:5px; -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1); -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1); box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1); } </style> <script type="text/javascript"> window.onload = function () { var myDiv = document.getElementById("myDiv"); var contentArr = "秋天來臨了天空像一塊覆蓋大地的藍寶石。村外那個小池塘睜著碧澄澄的眼睛,凝望著這美好的天色。一對小白鵝側(cè)著腦袋欣賞自己映在水里的影子。山谷里楓樹的葉子,不知是否喝了過量的酒,紅的像一團火似的。村前村后的稻子,低著頭彎著腰,在秋風中默默地等待著人們?nèi)ナ崭睿肟罩?,排著“人”字形的雁群,高興的唱著歌,告別人們,向天邊慢慢飛去……".split(""); var content = ""; var index = 0; var ID = setInterval(function () { content += contentArr[index]; myDiv.innerHTML = content + "_"; index++; if(index === contentArr.length){ myDiv.innerHTML = content ; clearInterval(ID); console.log("結(jié)束了"); } },100); } </script> </head> <body> <div id="myDiv"></div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- C++實現(xiàn)的打字母游戲示例
- javascript實現(xiàn)自動輸出文本(打字特效)
- 基于Css3和JQuery實現(xiàn)打字機效果
- JavaScript實現(xiàn)打字效果的方法
- JavaScript模擬實現(xiàn)鍵盤打字效果
- C++實現(xiàn)類似延時停頓的打字效果
- javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對話中仿打字機輸出文字
- JavaScript打字小游戲代碼
- javascript 打字效果的文字特效
- javascript 打字游戲?qū)崿F(xiàn)代碼
- javascript之textarea打字機效果提示代碼推薦
- C語言制作簡易金山打字通功能的代碼
相關(guān)文章
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級數(shù)據(jù)格式,可以方便地表示復雜數(shù)據(jù)結(jié)構(gòu)。JSON對象有兩個方法:stringify()和parse()。在簡單的情況下,這兩個方法分別可以將JavaScript序列化為JSON字符串,以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項。2021-05-05JS實現(xiàn)關(guān)鍵字搜索時的相關(guān)下拉字段效果
關(guān)鍵字搜索時有下拉字段,在使用百度時會遇到,本例講述用js實現(xiàn)類似的效果2014-08-08JS實現(xiàn)本地存儲信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實現(xiàn)本地存儲信息的方法,基于localStorage與userData實現(xiàn)本地存儲的功能,需要的朋友可以參考下2017-02-02一文詳解GoJs中g(shù)o.Panel的itemArray屬性
這篇文章主要為大家介紹了一文詳解GoJs中g(shù)o.Panel的itemArray屬性詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05一起來了解一下JavaScript的預編譯(小結(jié))
這篇文章主要介紹了一起來了解一下JavaScript的預編譯(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03