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打字机效果

相关推荐

网站新年灯笼代码

Javascript实现禁止复制网页内容

让wordpress在HTML编辑器下添加链接在新窗口中打开

Tab标签选项卡和滑动门菜单(CSS+JS)

用PHP生成html的例子

HTML颜色参考

评论 (0)