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

JavaScript010

使用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>

给文本框添加一个onkeyup事件

然后在页面上添加一个你要显示文本框内容的任意标签，但id必须是唯一的

实例：

<input type="text" size="20" onkeyup="shu(this.value)"/>

<span id="txt">这里显示文本框的内容</span>

js代码：

<script>

function shu(text){

document.getElementById('txt').innerText=text

}

</script>

网上搜集一下网页特效文字代码。

根据你的要求我找到了一则代码，你加入试试效果。

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>网页特效|Linkweb.cn/Js|---打字效果的文字切换</title>

</head>

<body>

<script language="JavaScript1.2">

<!--

/*

Typing Scroller

Submitted by bengaliboy00@hotmail.com (hp: http://www.angelfire.com/nt/bengaliboy/)

With modifications by Dynamicdrive.com

For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com

*/

//设置滚动的内容

var line=new Array()

line[1]="欢迎光临网页特效"

line[2]="http://linkweb.cn/js"

line[3]="提出宝贵意见"

line[4]="希望你喜欢这种模式"

line[5]="再次感谢你的光临"

//设置字体大小

var ts_fontsize="16px"

//--Don't edit below this line

var longestmessage=1

for (i=2i<line.lengthi++){

if (line[i].length>line[longestmessage].length)

longestmessage=i

}

//Auto set scroller width

var tscroller_width=line[longestmessage].length

lines=line.length-1 //--Number of lines

//if IE 4+ or NS6

if (document.all||document.getElementById){

document.write('<form name="bannerform">')

document.write('<input type="text" name="banner" size="'+tscroller_width+'"')

document.write(' style="background-color: '+document.bgColor+'color: '+document.body.text+'font-family: verdanafont-size: '+ts_fontsize+'font-weight:boldborder: medium none" onfocus="blur()">')

document.write('</form>')

}

temp=""

nextchar=-1

nextline=1

cursor="\\"

function animate(){

if (temp==line[nextline] &temp.length==line[nextline].length &nextline!=lines){

nextline++

nextchar=-1

document.bannerform.banner.value=temp

temp=""

setTimeout("nextstep()",3000)}

else if (nextline==lines &temp==line[nextline] &temp.length==line[nextline].length){

nextline=1

nextchar=-1

document.bannerform.banner.value=temp

temp=""

setTimeout("nextstep()",3000)}

else{

nextstep()}}

function nextstep(){

if (cursor=="\\"){

cursor="|"}

else if (cursor=="|"){

cursor="/"}

else if (cursor=="/"){

cursor="-"}

else if (cursor=="-"){

cursor="\\"}

nextchar++

temp+=line[nextline].charAt(nextchar)

document.bannerform.banner.value=temp+cursor

setTimeout("animate()",100)}

//if IE 4+ or NS6

if (document.all||document.getElementById)

window.onload=animate

// -->

</script>

</body>

</html>