gpt4 book ai didi

javascript - 如何在javascript类型书写效果中使文本出现在下一行

转载 作者:行者123 更新时间:2023-12-03 04:33:34 28 4
gpt4 key购买 nike

我正在使用 java 脚本打字效果在我的网页上显示报价。我已经做到了,但我的问题是我希望作者的名字位于右下角,但与文本一起出现。我该怎么做?

这是我的代码

document.addEventListener('DOMContentLoaded', function(event) {
// array with texts to type in typewriter
var dataText = ["Start by doing whats necessary;\n\then do whats impossible;and\n\then suddenly you are doing the impossible;\n\-Francis of Assisi"];

// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.querySelector("h3").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';

// wait for a while and call this function again for next character
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 100);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
}
}
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined') {
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function() {
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
});
}
}
// start the text animation
StartTextAnimation(0);
});
<div style="position: relative;width:490px;">
<h3 style=" font-family: 'pacifico',cursive;font-size: 30px">Hello</h3></div>

最佳答案

或者你可以生成一些像这里这样的代码

var dataText = ["Start by doing whats necessary;\n\then do whats impossible;and\n\then suddenly you are doing the impossible;\n\<div id="+"author>-Francis of Assisi</div>"];

...制作 div 以便更好地管理 css

关于javascript - 如何在javascript类型书写效果中使文本出现在下一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43389717/

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