使用 Typed.js 打字机效果时出错

Question

我正在使用 HTML5、CSS、Javascript、Typed.js 创建打字效果。这是我的代码=

 <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 </head>
 <body>

 <p class ="TypeWirter_effect"></p>

  <script src="jquery-ui.min.js>"></script>     //This is downloaded from jquery's Website n pasted in same folder
 <script src="jquery.js"></script>         //This is downloaded from jquery's Website n pasted in same folder
 <script src="typed.min.js"></script>      //This is downloaded from Typed.js main Website n pasted in same folder


<script>
$(function() {
    $("#TypeWirter_effect").typed({
        strings: ["Want to learn Coding ?", "Want to learn C++","Java","Python"],
        typeSpeed: 0,
        loop: true,
        backSpeed: 30,
        showCursor: true,
        backDelay: 500,
        startDelay: 1000,
        contentType: 'text',
        backspace: function(curString, curStrPos) {


                    setTimeout(function () {

                                // check string array position
                                // on the first string, only delete one word
                                // the stopNum actually represents the amount of chars to
                                // keep in the current string. In my case it's 3.
                                if (curString.arrayPos == 20) {
                                    curString.stopNum = 14;
                                }
                                //every other time, delete the whole typed string
                                else {
                                    self.stopNum = 14;

                                }
                            }
                    )
                }
    });
});
</script>
</body>
</html>

1) 当我运行这个光标总是出现在底部 cursor problem 时，我希望光标紧挨着 ?标记在此行的末尾，但它始终保持向下。

2) 我希望第二句 "Want to learn C++" 不被完全删除，c++ 2 被删除并附加 java 。

我已阅读文档。但似乎没有任何效果。求助 Link 的文档==(https://github.com/mattboldt/typed.js/blob/master/README.md)

Answer 1

1)

p 标签是 paragraph，将 p 标签更改为 span 标签，您的问题将得到解决。

<span class="TypeWirter_effect"></span>

2)

只需在您的打字机效果文字前添加文字：

Want to learn <span class="TypeWirter_effect"></span>

并将字符串更改为：

strings: ["Coding?", "C++?", "Java?", "Python?"]

演示：https://jsfiddle.net/Brownsugar/cncm5w0u/

我使用回调函数启动语言打字机并让它循环。

首先运行主句.TypeWirter_effect，当它完成时，运行 .lang.

HTML:

<span class="TypeWirter_effect"></span><span class="lang"></span>

javascript:

$(function() {
        $('.TypeWirter_effect').typed({
            strings: ['Want to learn Coding?', 'Want to learn '],
            typeSpeed: 50,
            backDelay: 3000,
            callback: function(){
                showLang(); // run another element
                $('.typed-cursor').first().hide(); // hide first cursor
            }
        });
});
function showLang() {
        $('.lang').typed({
            strings: ['C++', 'Java', 'Python'],
            typeSpeed: 50,
            backDelay: 2000,
            loop: true
        });
}

演示：https://jsfiddle.net/Brownsugar/cncm5w0u/1/

使用 Typed.js 打字机效果时出错

Error in using Typed.js Typewriter effect

html

javascript

css

typed.js