Show text letter by letter

前端 未结 16 1507
旧巷少年郎
旧巷少年郎 2020-11-27 16:38

What is the most elegant way of showing an html text letter by letter (like videogame captions) using CSS and JavaScript?

While I\'m sure that his can be solved usin

16条回答
  •  自闭症患者
    2020-11-27 17:00

    The answer I will type is the answer Show text letter by letter , but I made some changes to it

    HTML

    Javacript

    var showText = function (target, message, index, interval) {    
      if (index < message.length) { 
        //$(target).append(message[index++]);
        $(target).text($(target).text() + message[index++]);
        setTimeout(function () { showText(target, message, index, interval); }, interval); 
      } 
    }
    
    $(function () { 
      showText("#msg", "Hello, World!", 0, 80);    
      //showText("#msg", "Hello, World!", 0, 500);
    }); 
    

    CSS

    #msg {
        color: #6d67c6;
        font-family: sans-serif;
        font-size: 30px;
        font-weight: bold;
    }
    

提交回复
热议问题