JQ打字效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ字幕打字效果</title>
<style>
*{margin: 0;padding: 0;}
body{background-color: #000;color: #00FF00;padding: 100px;font-size: 30px;}
.hide{display: none;}
</style>
</head>
<body>
<!-- 输出文本的DIV -->
<div id="showBox"></div>
<!-- 想要输出的文本 -->
<div class="hide" id="conToWrite">
    Login : username<br>
    password : ******<br>
    Access is granted<br>
    中文呢？
</div>
<script src="http://www.lamahui.com/static/1.0/js/base/v1.js"></script>
<script>
$(function () {
    var showBox = $('#showBox'),    //文本输出
        con  = $('#conToWrite'),    //想要输出的文本
        text = null,
        charIndex = -1,
        len = 0;

    function writeContent(init){
        if(init){
            text = con.html();
        }
        if (charIndex === -1) {
            charIndex = 0;
            len = text.length;
        }

        var initString = showBox.html();
        initString = initString.replace(/<span.*$/gi,'');

        var theChar = text.charAt(charIndex);
        var nextFourChars = text.substr(charIndex,4);
        if (nextFourChars === '<br>' || nextFourChars === '<BR>') {
            theChar = '<br>';
            charIndex += 3;
        }
        initString = initString + theChar + "<span id='blink'>_</span>";
        showBox.html(initString);
        charIndex = charIndex/1 + 1;

        if (charIndex % 2 === 1 ) {
            $('#blink').hide();
        } else {
            $('#blink').show();
        }

        if (charIndex <= len) {
            setTimeout(function(){
                writeContent(false);
            }, 150);
        } else {
            blinkSpan();
        }
    }
    var currentStyle = 'inline';
    function blinkSpan(){
        if(currentStyle=='inline'){
        currentStyle='none';
        }else{
        currentStyle='inline';
        }
        $('#blink').css('display',currentStyle);
        setTimeout(function(){
            blinkSpan();
        },500);
    }

    writeContent(true);
});
</script>
</body>
</html>

效果如下图：

高否？富否？帅否？否？滚去学习！

相关阅读:
如何在iOS中使用Block(转)
blocks 学习(转)
关于sqlite3 top的查询
IOS多线程编程
iOS平台内存常见问题(转)
关于C中数组的组织存放
消息推送机制实现与探讨
IOS单例模式(Singleton)
assign copy retain
关于浮动，怪异模式

原文地址：https://www.cnblogs.com/baixc/p/4225893.html