javascript 打字机效果
实例1
<html>
<title>javascript 打字机</title>
<head>
<style type="text/css">
body{
font-family: trebuchet ms, lucida sans unicode, arial, sans-serif;
margin-top:0px;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:100px;
}
#mycontent, #mycontent blink{
width:500px;
height:200px;
background:black;
color: #00ff00;
font-family:courier;
}
blink{
display:inline;
}
</style>
<script type="text/javascript">
var charindex = -1;
var stringlength = 0;
var inputtext;
function writecontent(init){
if(init){
inputtext = document.getelementbyid('contenttowrite').innerhtml;
}
if(charindex==-1){
charindex = 0;
stringlength = inputtext.length;
}
var initstring = document.getelementbyid('mycontent').innerhtml;
initstringinitstring = initstring.replace(/<span.*$/gi,"");
var thechar = inputtext.charat(charindex);
var nextfourchars = inputtext.substr(charindex,4);
if(nextfourchars=='<br>' || nextfourchars=='<br>'){
thechar = '<br>';
charindex+=3;
}
initstringinitstring = initstring + thechar + "<span id='blink'>_</span>";
document.getelementbyid('mycontent').innerhtml = initstring;
charindexcharindex = charindex/1 +1;
if(charindex%2==1){
document.getelementbyid('blink').style.display='none';
}else{
document.getelementbyid('blink').style.display='inline';
}
if(charindex<=stringlength){
settimeout('writecontent(false)',150);
}else{
blinkspan();
}
}
var currentstyle = 'inline';
function blinkspan(){
if(currentstyle=='inline'){
currentstyle='none';
}else{
currentstyle='inline';
}
document.getelementbyid('blink').style.display = currentstyle;
settimeout('blinkspan()',500);
}
</script>
<body>
<div id="mycontent">
</div>
<div id="contenttowrite" style="display:none">
<!-- put the typewriter content here-->
sharejs.com
login : username<br>
password : ******<br>
access is granted<br>
<!-- end typewriter content -->
</div>
<script type="text/javascript">
writecontent(true);
</script>
</body>
</html>
实例2 （兼容ie，fx）
<html>
<head>
<title>打字效果的带链接的新闻标题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
最新内容：<a id="hotnews" href="" target="_blank"></a>
<script language="javascript">
var newstime = 2000; //每条新闻的停留时间
var texttime = 50; //新闻标题文字出现等待时间，越小越快
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
var newnewstitle = new array(); //新闻标题
var newnewshref = new array(); //新闻链接
newstitle[0] = "javascript常用函数";
newshref[0] = "http://www.jb51.net/article/74365.htm";
newstitle[1] = "http://www.jb51.net/";
newshref[1] = "http://www.jb51.net/";
function shownew()
{
var endstr = "_";
hwnewstr = newstitle[newsi];
newslink = newshref[newsi];
if(txti==(hwnewstr.length-1)){endstr="";}
if(txti>=hwnewstr.length){
clearinterval(txttimer);
clearinterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi = 0
}
newstimer = setinterval("shownew()",newstime);
txti = 0;
return;
}
clearinterval(txttimer);
document.getelementbyid("hotnews").href=newslink;
document.getelementbyid("hotnews").innerhtml = hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer = setinterval("shownew()",texttime);
}
shownew();
</script>
</body>
</html>
以上就是javascript如何实现打字机效果实例代码详解的详细内容。