JavaScript實現(xiàn)簡單的文本逐字打印效果示例
本文實例講述了JavaScript實現(xiàn)簡單的文本逐字打印效果。分享給大家供大家參考,具體如下:
先來看看運行效果:

具體代碼如下:
<!DOCTYPE>
<html>
<head>
<title>chabaoo.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打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可JS打字機效果 ,原理很簡單:每次多獲取一個待打出的字符串的值,輸出,覆蓋原來輸出的內容即可";
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>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
javascript generator生成器函數(shù)與asnyc/await語法糖
本文主要介紹了javascript generator生成器函數(shù)與asnyc/await語法糖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
JavaScript中英文字符長度統(tǒng)計方法示例【按照中文占2個字符】
這篇文章主要介紹了JavaScript中英文字符長度統(tǒng)計方法,涉及javascript針對中英文字符的匹配與運算相關操作技巧,需要的朋友可以參考下2017-01-01
JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)計算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03

