实现打字效果

Posted 2020-09-09 whys

摘自一个表白网站的效果。

方法：

　　substr() 可在字符串中抽取从 第一个参数表示从指定的下标，第二个参数表示抽取指定数目的字符。

　　indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，两个参数，第一位指定的字符串，第二是开始检索的位置。

　　substring() 方法用于提取字符串中介于两个指定下标之间的字符。

html

<div id="main">
        <div id="content">
            <div id="code">
                <span class="col_3f7f5f">/**</span><br />
                <span class="space"/><span class="col_3f7f5f">* I became a small company programmer,</span><br />
                <span class="space"/><span class="col_3f7f5f">* So I want to wish you a happy birthday in a different way.</span><br />
                <span class="space"/><span class="col_3f7f5f">*/</span><br />
                Boy i = <span class="col_7f0055">new</span> Boy(<span class="col_2a36ff">"HeheWang"</span>);<br />
                Girl u = <span class="col_7f0055">new</span> Girl(<span class="col_2a36ff">"BigBoss"</span>);<br />
                <span class="col_3f7f5f">// February 20, 2015, I tell you to be my girlfriend. </span><br />
                i.love(u);<br />
                <span class="col_3f7f5f">// Forget your facial expression, may be surprised.</span><br />
                <span class="col_3f7f5f">// Luckily, You took my girlfriend.</span><br />
                u.agree(i);<br />
                <span class="col_3f7f5f">// After, I miss u every day.</span><br />
                i.miss(u);<br />
                <span class="col_3f7f5f">// And care for u and our love.</span><br />
                i.carefor(u);<br />
                <span class="col_3f7f5f">// Until we start to quarrel.</span><br />
                i.quarrel(u);<br />
                <span class="col_3f7f5f">// Soon we‘ll be fine.</span><br />
                fine(i,u);<br />
                <span class="col_3f7f5f">// March 18th is your birthday.</span><br />
                <span class="col_7f0055">number</span> days = <span class="col_7f0055">0</span>;<br />
                <span class="col_7f0055">while</span> (days < 365) {<br />
                <span class="ml_15"/>u happy;<br />
                <span class="ml_15"/>days++<br />
                <span class="ml_15"/><span class="col_3f7f5f">// I hope u can live a more meaningful life</span><br />
                <span class="ml_15"/><span class="col_3f7f5f">// And healthy.</span><br />
                }<br />
                <span class="col_3f7f5f">// You say that you won‘t be so easy to marry me.</span><br />
                <span class="col_3f7f5f">// So I will try my best to let you marry me.</span><br />
                i tryhard();<br />
                <span class="col_3f7f5f">// Until one day I can marry you.</span><br />
                i.marry(u);<br />
                i.liveHappilyWith(u);<br />
            </div>
        </div>
    </div>

 

CSS

html,body{
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 12px;
    background: #ffe;
    overflow: hidden;
}
#main{
    width: 100%;
    height: 100%;
}
#content{
    width: 1110px;
    height: auto;
    margin-left: 135.5px;
    overflow: hidden;
}
#code{
    margin-top: 80px;
    float: left;
    width: 440px;
    height: 500px;
    color: #333;
    font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";
}
#code .space{
    margin-left: 7px;
}
.col_3f7f5f{
    color: #3f7f5f;
}
.col_7f0055{
    color: #7f0055;
    font-weight: bold;
}
.col_2a36ff{
    color: #2a36ff;
}
.ml_15{
    margin-left: 15px;
}

 

JS

<script src="jquery.min.js"></script>
<script>
    $("#code").each (function() {
        var $ele = $(this),  // $("#code")
        str = $ele.html(),   // 先获取$("#code") 的html
        progress = 0;        // 定义一个变量
        $ele.html(‘‘);        // 清空$("#code")的html

        // 定义一个定时器
        var timer = setInterval(function() {
            // substr() 方法可在字符串中抽取从 第一个参数 下标开始的指定数目的字符。
            var current = str.substr(progress, 1);    //
            if (current == ‘<‘) {
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                // 两个参数，第一位指定的字符串，第二是开始检索的位置
                progress = str.indexOf(‘>‘, progress) + 1;
            } else {
                progress++;
            }
            // substring() 方法用于提取字符串中介于两个指定下标之间的字符。
            $ele.html(str.substring(0, progress) + (progress & 1 ? ‘_‘ : ‘‘));
            // 
            if (progress >= str.length) {
                clearInterval(timer);
            }
        }, 75);
    });
</script>

 

上面的代码看起来有点乱，下面是个简单点的。

<body>
    <div class="contain"></div>
</body>
<script src="jquery.min.js"></script>
<script>
    var str ="hello,word hello,word";
    var strlen =str.length;
    var index =0;
    var con =$(".contain");
    var boo =null;

    function start(){
        boo =setInterval(function(){
            con.append(str.charAt(index));
            index++;
            if(index == strlen){
                clearInterval(boo);
            }
        },100)
    }
    start();

</script>

 

知识点：

　　charAt() 方法可返回指定位置的字符。返回的字符串长度为1。