<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function ceshi(){
var divText = document.getElementById("div2").innerText;//獲取需要顯示的信息
var len = divText.length;
var i = 0;
window.setInterval(function(){//使用間歇調用函數
if(i<=len){
document.getElementById("div1").innerText = divText.substring(0,i)+"|";//將要顯示的信息逐個添加進要顯示的位置
}else{
window.clearInterval(setInId);//輸出結束後停止間歇調用函數
}
i++;
},400);
}
</script>
</head>
<body onload="ceshi()">
<center>
<div id="div1" style="background-color: blanchedalmond; height: 50px; width: 100%;"></div>
<div id="div2" style="display: none;">JS實現簡單的動態打字效果</div>
</center>
</body>
</html>
純js實現簡單的動態打字效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章