首頁 > 開發者 > JavaScript
本文執行個體講述了JavaScript實現簡單的文本逐字列印效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE>
<html>
<head>
<title>www.jb51.net 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
