js+css實(shí)現(xiàn)打字效果
更新時(shí)間：2020年06月24日 10:09:47 作者：冷月葬殘花
這篇文章主要為大家詳細(xì)介紹了js+css打字效果的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(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 = "秋天來臨了天空像一塊覆蓋大地的藍(lán)寶石。村外那個(gè)小池塘睜著碧澄澄的眼睛，凝望著這美好的天色。一對(duì)小白鵝側(cè)著腦袋欣賞自己映在水里的影子。山谷里楓樹的葉子，不知是否喝了過量的酒，紅的像一團(tuán)火似的。村前村后的稻子，低著頭彎著腰，在秋風(fēng)中默默地等待著人們?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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- C++實(shí)現(xiàn)的打字母游戲示例
- javascript實(shí)現(xiàn)自動(dòng)輸出文本（打字特效）
- 基于Css3和JQuery實(shí)現(xiàn)打字機(jī)效果
- JavaScript實(shí)現(xiàn)打字效果的方法
- JavaScript模擬實(shí)現(xiàn)鍵盤打字效果
- C++實(shí)現(xiàn)類似延時(shí)停頓的打字效果
- javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對(duì)話中仿打字機(jī)輸出文字
- JavaScript打字小游戲代碼
- javascript 打字效果的文字特效
- javascript 打字游戲?qū)崿F(xiàn)代碼
- javascript之textarea打字機(jī)效果提示代碼推薦
- C語言制作簡(jiǎn)易金山打字通功能的代碼
相關(guān)文章
JavaScript JSON.stringify()的使用總結(jié)
JSON是一種輕量級(jí)數(shù)據(jù)格式，可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對(duì)象有兩個(gè)方法：stringify()和parse()。在簡(jiǎn)單的情況下，這兩個(gè)方法分別可以將JavaScript序列化為JSON字符串，以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項(xiàng)。2021-05-05
JS實(shí)現(xiàn)關(guān)鍵字搜索時(shí)的相關(guān)下拉字段效果
關(guān)鍵字搜索時(shí)有下拉字段，在使用百度時(shí)會(huì)遇到,本例講述用js實(shí)現(xiàn)類似的效果2014-08-08
請(qǐng)求的URL后面帶參數(shù)在項(xiàng)目中是很常見的，常用在的地方比如跳轉(zhuǎn)到新頁面或者請(qǐng)求CGI等2012-02-02
JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法(基于localStorage與userData)
這篇文章主要介紹了JS實(shí)現(xiàn)本地存儲(chǔ)信息的方法,基于localStorage與userData實(shí)現(xiàn)本地存儲(chǔ)的功能,需要的朋友可以參考下2017-02-02
JavaScript圓形虛幻效果，跟PS里面的羽化效果有點(diǎn)像，需要的朋友可以參考下。2011-12-12
一文詳解GoJs中g(shù)o.Panel的itemArray屬性
這篇文章主要為大家介紹了一文詳解GoJs中g(shù)o.Panel的itemArray屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了javascript?Redux的狀態(tài)管理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
一頁面多XMLHttpRequest對(duì)象...2007-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義tabBar組件開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
一起來了解一下JavaScript的預(yù)編譯(小結(jié))
這篇文章主要介紹了一起來了解一下JavaScript的預(yù)編譯(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03