Javascript 如何使所需的文本逐字显示
我有一个函数,它将文本附加到Javascript 如何使所需的文本逐字显示,javascript,jquery,Javascript,Jquery,我有一个函数,它将文本附加到div中,并带有一些颜色效果。 我想让文本逐字出现。(但我只需要在第二个函数的参数“str”的文本上使用这种效果,“who”必须看起来正常。 我找到了一个我需要的效果示例代码,但我不知道如何让这两个函数按照我的意愿一起工作 JS: //我的函数 var showText=函数(who,str){ 如果(str!==“”){ $(“#故事板”)。追加(“”+who.name+”:“+”+str+””; }; }; showText(somObj,“调用函数时我想附加在页
div
中,并带有一些颜色效果。
我想让文本逐字出现。(但我只需要在第二个函数的参数“str”的文本上使用这种效果,“who”必须看起来正常。
我找到了一个我需要的效果示例代码,但我不知道如何让这两个函数按照我的意愿一起工作
JS:
//我的函数
var showText=函数(who,str){
如果(str!==“”){
$(“#故事板”)。追加(“”+who.name+”:“+”+str+””;
};
};
showText(somObj,“调用函数时我想附加在页面上的文本”);
//我想添加到第一个函数中的函数
$(函数(){
var a=新字符串;
a=$('.text_cont_inner').text();
$('.text_cont_inner')。text('');
var c=a.长度;
j=0;
setInterval(函数(){
if(j
HTML:
MacroG0D-我的第一个游戏
星球大战-治愈创伤:
很久以前,在一个遥远的星系里
欢迎来到虚拟虚拟现实。你准备好开始这段旅程了吗
进入
试试这个:)
var showText=function(who,str){
如果(!str){
返回;
}
var textNode=$(“#故事板”)//获取容器
.append(“”+who.name+”:”//添加内容
.find(“p span:last-Сhild”)[0];//选择last将str值放入
var words=str.split(“”;//在单词上断开字符串
var intervalId=setInterval(函数(){//设置新的间隔并记住它的ID
如果(!words.length){//数组中没有剩余单词
返回clearInterval(intervalId);//停止运行interval并退出
}
textNode.innerText+=“”+words.shift();//添加空格和下一个单词
},100);//插入单词之间的间隔毫秒
};
显示html代码片段仅用于可运行的代码。如果您的代码只包含JavaScript,请避免使用它们。我添加了我的html代码和“showText”函数调用,以显示我在问题中的确切含义。我做了一些简短的示例。我希望这就是你想要的:)。出现以下错误:语法错误,无法识别的表达式:不支持的pseudo:lastchilds谢谢您的帮助,但它仍然无法工作。也许我没有很好地解释我的问题。。我不知道如何更好地解释,然后只显示:例如,当用户在命令行中输入“yes”时,文本“wellcomeastern”等必须逐字出现。(但“机器”必须看起来正常)。
// my function
var showText = function(who, str) {
if(str !== "") {
$("#storyBoard").append("<p><span style='color:#323232;'>" + who.name + ": " + "</span>" + str + "</p>");
};
};
showText(somObj, "The text i want to append on the page when calling the function");
// the function i want to add into my first function
$(function() {
var a = new String;
a = $('.text_cont_inner').text();
$('.text_cont_inner').text('');
var c = a.length;
j = 0;
setInterval(function() {
if(j < c) {
$('.text_cont_inner').text($('.text_cont_inner').text() + a[j]);
j = j + 1;
} else {
$('.text_cont_inner').removeClass('after')
}
}, 100);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MacroG0D - My first game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ='Js/main.js' type="text/javascript"> </script>
</head>
<body>
<div id = "storyBoard">
<h1> Star Wars - Healing <br>The Breach:<hr></h1>
<p class="intro">A long time ago, in a galaxy far, far away</p>
<p> Welcome to the virtual pseudo-reality. Are you ready to start this journey? </p>
</div>
<input type="text" id ="myInput" placeholder="Type the command here" name="myInput" autofocus autocomplete='off'/>
<button id="btn" type="submit"> Enter </button>
</body>
</html>
var showText = function(who, str) {
if(!str){
return;
}
var textNode = $("#storyBoard") // take container
.append("<p><span style='color:#323232;'>" + who.name + ": </span><span></span></p>") // add contents
.find("p span:last-сhild")[0]; // select last <span> to put str value into
var words = str.split(" "); // break a string on words
var intervalId = setInterval(function() { // set new interval and remember it's ID
if (!words.length) { // no words left in array
return clearInterval(intervalId); // stop running interval and exit
}
textNode.innerText += " " + words.shift(); // add space and next word
}, 100); // milliseconds between word insertions
};