JavaScript實(shí)現(xiàn)簡單的文本逐字打印效果示例
更新時(shí)間：2018年04月12日 11:49:18 作者：Dailoge
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單的文本逐字打印效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)簡單的文本逐字打印效果。分享給大家供大家參考，具體如下：
先來看看運(yùn)行效果：
具體代碼如下：
<!DOCTYPE>
<html>
<head>
<title>www.dbjr.com.cn js打字效果</title>
<meta charset="utf-8">
</head>
<style type="text/css">
div {
width:980px;
margin:10px auto;
background:#F3E6EA;
border:2px outset #f9c6aa;
color:green;
}
</style>
<script type="text/javascript">
var i=1;
function write()
{
var id=document.getElementById("main");
var msg="JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可JS打字機(jī)效果 ，原理很簡單：每次多獲取一個(gè)待打出的字符串的值，輸出，覆蓋原來輸出的內(nèi)容即可";
var len=msg.length;
var msg1=msg.substring(0,i);
id.innerHTML=msg1;
if(i==len){clearInterval(t)}
else
i++;
}
function time1()
{
var t=setInterval(function(){write()},50);
}
</script>
<body onload=time1()>
<div id="main"></div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了淺析我對JS延遲異步腳本的思考,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
做項(xiàng)目的時(shí)候遇到一個(gè)返回查詢內(nèi)容里面，只取最大和最小值問題，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
多選框（checkbox）用于選擇列表中的一個(gè)或多個(gè)選項(xiàng)，而單選框（radio）用于從多個(gè)選項(xiàng)中只選擇一個(gè)。接下來通過本文給大家介紹Bootstrap3 多選和單選框，一起看看吧2016-12-12
javascript generator生成器函數(shù)與asnyc/await語法糖
本文主要介紹了javascript generator生成器函數(shù)與asnyc/await語法糖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了js通過循環(huán)多張圖片實(shí)現(xiàn)動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript中英文字符長度統(tǒng)計(jì)方法示例【按照中文占2個(gè)字符】
這篇文章主要介紹了JavaScript中英文字符長度統(tǒng)計(jì)方法,涉及javascript針對中英文字符的匹配與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03
本文主要介紹了微信小程序視圖層莫名出現(xiàn)豎線的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
微信小程序換膚功能實(shí)現(xiàn)代碼(思路詳解)
這篇文章主要介紹了微信小程序換膚功能實(shí)現(xiàn)代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
JS實(shí)現(xiàn)在線Excel的附件上傳與下載
在本地使用Excel時(shí)，經(jīng)常會(huì)有需要在Excel中添加一些附件文件的需求，今天小編將為大家介紹如何使用前端HTML+JS+CSS技術(shù)通過超鏈接單元格的形式實(shí)現(xiàn)在線Excel附件上傳、下載和修改的操作，需要的可以參考下2023-08-08