╃苍狼山庄╃╃苍狼山庄╃

Clang出品,
必属精品!

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>

本原创文章未经允许不得转载 | 当前页面:╃苍狼山庄╃ » JavaScript打字机效果

评论

文章评论已关闭!