gpt4 book ai didi

javascript - 如何让需要的文字逐字出现

转载 作者:太空宇宙 更新时间:2023-11-04 16:20:15 24 4
gpt4 key购买 nike

我有一个函数,可以将具有某种颜色效果的文本附加到 div 中。我想让文本逐字出现。 (但我只需要对第二个函数的参数“str”的文本产生这种效果,“who”必须显示正常。我找到了我需要的效果的示例代码,但我不知道如何使这两个函数按我想要的方式一起工作。

JS:

// 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);
});

HTML:

<!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
};

关于javascript - 如何让需要的文字逐字出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40708644/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com