JavaScript打字机效果

JavaScript打字机效果
打字速度请修改代码中的
setTimeout('writeContent(false)',100);
数值，值越小，打字速度越快。
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打字机效果</title>
    <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">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, September 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/	
    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;
		initString = initString.replace(/<SPAN.*$/gi,"");
        
        var theChar = inputText.charAt(charIndex);
       	var nextFourChars = inputText.substr(charIndex,4);
       	if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
       		theChar  = '<BR>';
       		charIndex+=3;
       	}
        initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
        document.getElementById('myContent').innerHTML = initString;

        charIndex = 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)',100);
        }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>
</head>
<body>
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
<!-- Put the clang.com content here--><br>
telnet clang.com<br>
Login : username<br>
password : ******<br>
Access is granted<br>
<!-- End clang.com content -->
</div>
<script type="text/javascript">
writeContent(true);
</script>
</body>
</html>
╃苍狼山庄╃

相关推荐

评论

文章评论已关闭！
