打字机效果展示-优快云博客

本文链接：https://blog.youkuaiyun.com/boolean2011/article/details/7192390

本文介绍了一个利用JavaScript实现的动态文本显示效果，通过定时改变文本内容的样式来模仿打字机的输入过程，增加了网页内容的互动性和趣味性。主要内容包括：动态文本内容的生成、样式切换以及文本闪烁效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<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)',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>
</HEAD>

<BODY>
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">

sharejs.com
Login : username<br>
password : ******<br>
Access is granted<br>

</div>
<script type="text/javascript">
writeContent(true);
</script>
</BODY>
</HTML>