[英]Stop loop in typewriter effect using JS
我的網站非常接近完美的打字機效果 - 主要感謝您在這里提供的出色輸入的支持! 我正在尋找的是下面打字機效果的輕微變化:讓最后一行文本保留在屏幕上而不是被擦除(但不是,如另一篇文章所述,整個文本,只有最后一行) .
所以理想情況下,第一行會建立,然后被擦除,然后第二行會建立,然后也被擦除,最后,第三行會建立並保留在屏幕上(同時光標仍然繼續眨)。 如果你能幫我弄清楚這個修改,我真的很感激! 預先感謝您一百萬!
PS:如果有機會添加一個延遲,那么第一行在例如 5 秒后開始建立(只有光標閃爍),這將是錦上添花! :-)
consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue']);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id)
target.setAttribute('style', 'color:' + colors[0])
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount)
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute('style', 'color:' + colors[0])
letterCount += x;
waiting = false;
}, 1000)
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000)
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount)
letterCount += x;
}
}, 120)
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden'
visible = false;
} else {
con.className = 'console-underscore'
visible = true;
}
}, 400)
}
這是我的看法:
// function([string1, string2], target id, [color1,color2], initial pause, final pause)
consoleText(['Hello World.', 'Console Text', 'Made with Love.'], 'text',['tomato','rebeccapurple','lightblue'], 5000, 500000);
function consoleText(words, id, colors, initialPause, finalPause) {
if (colors === undefined) colors = ['#fff'];
var visible = true;
var con = document.getElementById('console');
var letterCount = 1;
var x = 1;
var initialCount = 0;
var waiting = false;
var target = document.getElementById(id);
var justStarted = true;
target.setAttribute('style', 'color:' + colors[0]);
window.setInterval(function() {
if(initialCount < initialPause){
initialCount += 120;
} else if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount);
window.setTimeout(function() {
var usedColor = colors.shift();
var usedWord = words.shift();
x = 1;
target.setAttribute('style', 'color:' + colors[0]);
letterCount += x;
waiting = false;
}, 1000);
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, words.length === 1 ? finalPause : 1000);
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount);
letterCount += x;
}
}, 120);
window.setInterval(function() {
if (visible === true) {
con.className = 'console-underscore hidden';
visible = false;
} else {
con.className = 'console-underscore';
visible = true;
}
}, 400);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.