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

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

javascript html css

Javascript 使用Typed.js打字机效果时出错,javascript,html,css,typed.js,Javascript,Html,Css,Typed.js,我正在使用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.

我正在使用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>



//这是从jquery的网站下载的，粘贴在同一文件夹中
//这是从jquery的网站下载的，粘贴在同一文件夹中
//这是从Typed.js主网站下载的，粘贴在同一文件夹中
$（函数（）{
$（“#TypeWirter_效应”）。已键入({
字符串：[“想学习编码吗？”，“想学习C++”，“Java”，“Python”]，
打字速度：0，
循环：对，
后退速度：30，
是的，
反向延迟：500，
起始时间：1000，
contentType:'文本'，
退格：函数（curString、curStrPos）{
setTimeout（函数（）{
//检查字符串数组位置
//在第一个字符串上，仅删除一个单词
//stopNum实际上表示要添加的字符数
//保持在当前字符串中。在我的例子中是3。
if（curString.arrayPos==20）{
curString.stopNum=14；
}
//每隔一次，删除整个键入的字符串
否则{
self.stopNum=14；
}
}
)
}
});
});

1）当我运行此命令时，光标始终显示在底部，我希望光标正好位于？在这条线的末端做标记，但它总是保持向下

< P > 2）我希望第二个句子“想要学习C++”不被完全擦除，C++ 2被擦除，java附加到它。我已经看过文档了。但似乎什么都不管用。救命文档链接==（）

1）

标签是一个标签，将

标签更改为

span

标签，您的问题将得到解决

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

演示：

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

首先运行主句

.TypeWirter\u effect

，完成后运行

.lang

HTML:

java C++，我想2把第一行完全擦掉“想学习编码”，我想2种“想学C++”，然后删除C++ +NaveJAVA，然后删除Java添加Python。如果你告诉我这是怎么做的，我会接受UR ANS.+我已经投票了你的ANSV卡在这条线上“想学习C++/Java/Python”…我想一个循环，只要你完成这条“想要学习C++”，然后C++擦除然后java擦除，然后python擦除，我们回到第一行“想学习编码”。back@GEEkSpoTTed我已经尽力了，只是做了这样的东西：

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

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

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

$(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
        });
}