使用JS实现一个打字机字符输出效果

JavaScript09

使用JS实现一个打字机字符输出效果,第1张

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>打字机效果</title>

<script>

window.onload = function (){

var text = document.getElementById('text')

var str = '使用JS实现一个打字机字符输出效果使用JS实现一个打字机字符输出效果使用JS实现一个打字机字符输出效果使用JS实现一个打字机字符输出效果'

var arr = []

for(var i=0i<str.lengthi++){

arr.push(str[i])

}

var text1 = ''

var num = 0

var timer = setInterval(function (){

if(num < arr.length){

text1 += arr[num]

text.innerHTML = text1

num++

} else {

clearInterval(timer)

}

},200)

}

</script>

</head>

<body>

<div id='text'></div>

</body>

</html>

用JavaScript可以实现的。 第一步，请将下面的原代码加入<head>和</head>之间： <script> <!-- var count=0 function play() { msg=borba.innerText comp=msg.length type() } function type() { if(count<=comp){ borba.innerText=msg.substring(0,count) count++ setTimeout("type()",200)} else{ count=0 play() } } //--> </script> 第二步：将<body>语句改为<body onload="play()"> 第三步：将下面的代码加入<body>和</body>之间你需要的地方

<span id="demo"></span>

<script>

var text="dffasdfasdfadsfadsfdafklsjdflkajsdf'alskdjf'asdlf" //预定文字

var delay=200 //文字出现的时间间隔

var i=0 //初始化变量 i

function scrollit(){

//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"

document.getElementById('demo').innerHTML=text.slice(0,i++)+"_"

if(i>text.length){ //当 i 大于 text 的文本长度时

i=0//重设 i 为 0，使文字重新从第一个文字出现

//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点

setTimeout("scrollit()",delay*10)

}

//否则在delay毫秒后再次执行scrollit()函数

else setTimeout("scrollit()",delay)

}

scrollit()//调用scrollit()函数

</script>