回上頁 - 網頁JQuery語法

022、打字機效果：學習使用 setInterval() 取出字串陣列

1、範例事先準備

<script src="js/jquery-3.7.1.min.js"></script>

<style type="text/css">
body{ font-size: 2.4rem; text-align: center; }
</style>

<body>

<h1>打字機效果</h1>
<p id="text"></p>

</body>

<script type="text/javascript">
$(document).ready(function(){

    //句子
    var str = "我正在學JQuery程式語言！";
    alert(str.length);

    //陣列索引值，從0開始
    var n = 0;

    //儲存合併字串變數
    var total = '';

    //使用setInterval函式做出打字機效果
    var myTimer = setInterval(function(){

    }, 300);

});
</script>

2、實作目標：

<script>
$(document).ready(function(){
    //
    var str = "我正在學JQuery程式語言！";
    //
    var myTimer = setInterval(function(){

        //測試這行
        $("p#text").text(str);
        
    }, 300);
});
</script>

 

<script>
$(document).ready(function(){
    //
    var str = "我正在學JQuery程式語言！";
    //宣告一個變數 n,做為陣列索引號
    var n=0;
    //
    var myTimer = setInterval(function(){

        //
        //$("p#text").text(str[0]);
        $("p#text").text(str[n]);
        
    }, 300);
});
</script>

 

<script>
$(document).ready(function(){
    //
    var str = "我正在學JQuery程式語言！";
    //
    var n=0;
    //
    var myTimer = setInterval(function(){

        //
        $("p#text").text(str[n]);
        n++;

    }, 300);
});
</script>

 

<script>
$(document).ready(function(){
    //
    //句子
    var str = "我正在學JQuery程式語言！";

    //陣列索引變數
    var n=0;

    //宣告變數 total 是一個空字串
    var total = '';

    //
    var myTimer = setInterval(function(){

        //
        total = total + str[n];
        $("p#text").text(total);
        n++;

    }, 300);

});
</script>

 

<script>
$(document).ready(function(){
    //
    //句子
    var str = "我正在學JQuery程式語言！";

    //陣列索引變數
    var n=0;

    //宣告變數 total 是一個空字串
    var total = '';

    //
    var myTimer = setInterval(function(){

        if(n < str.length){

            //成立
            total = total + str[n];
            $("p#text").text(total);
            n++;
        }else{

            //不成立，則清除 setInterval() 來停止
            clearInterval(myTimer);
        }

    }, 300);
});
</script>

 

<script>
$(document).ready(function(){
    //
    //句子
    var str = "我正在學JQuery程式語言！";

    //陣列索引變數
    var n=0;

    //宣告變數 total 是一個空字串
    var total = '';

    //
    var myTimer = setInterval(function(){

        if(n < str.length){

            //成立
            total = total + str[n];
            $("p#text").text(total);
            n++;
        }else{

            //不成立，則清除 setInterval() 來停止
            //clearInterval(myTimer);

            //重頭開始
            n=0;
            total='';
        }
    }, 300);
});
</script>

2、用CSS美化一下文字：

<script>
$(document).ready(function(){
    //
    //句子
    var str = "我正在學JQuery程式語言！";

    //陣列索引變數
    var n=0;

    //宣告變數 total 是一個空字串
    var total = '';

    //
    var myTimer = setInterval(function(){

        if(n < str.length){

            //成立
            //total = total + str[n];
            //total = total + "<span style='display:inline-block;width:50px; border:1px solid #333';>" + str[n] + "</span>";
            total = total + "<span style='border:1px solid #333';>" + str[n] + "</span>";
            

            //$("p#text").text(total);
            $("p#text").html(total);
            n++;
        }else{

            //不成立，則清除 setInterval() 來停止
            //clearInterval(myTimer);

            //重頭開始
            n=0;
            total='';
        }
    }, 300);
});
</script>

作品展示：

打字機效果

shape
shape