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）我希望第二句“想要学习C ++”不被完全删除，c ++ 2将被删除，java将被附加到它上面。

我已经阅读了文档。但似乎没有任何工作。帮助文档链接==（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打字机效果时出错

1 个答案: