按鍵后的打字效果
[英]Typing effect after button press
問題描述
我想創建一個按鈕，當按下它時，它會“輸入”一些隨機文本。 我遵循了許多教程/代碼片段，但沒有成功地實現正確。
本質上，我想結合這兩個腳本。 當我單擊一個按鈕時，它應該選擇一個隨機字符串，然后使用“打字”效果來打字。
再次按下按鈕將中斷正在鍵入的內容，並生成新文本。
非常感謝任何幫助！
var i = 0; var txt = 'Lorem ipsum dummy text.'; var speed = 50; function typeWriter() { if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } }
<button onclick="typeWriter()">Click me</button> <p id="demo"></p>和這個：
var quotes = [ 'The sky is blue', 'The stove is hot', 'The floor is wet', 'The grass is green', 'The water is cold' ] function newQuote() { var randomNumber = Math.floor(Math.random() * (quotes.length)); document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber]; } <div id="quoteDisplay"></div> <button onclick="newQuote()">Click me</button>
4 個解決方案
解決方案1
1 已采納 2019-10-17 05:44:21
你快到了
var i = 0; var txt = ''; //the typing text var speed = 50; function typeWriter() { //clear the html initially for a text if (i === 0) document.getElementById("demo").innerHTML = ''; if (i < txt.length) { document.getElementById("demo").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } } var quotes = [ 'The sky is blue', 'The stove is hot', 'The floor is wet', 'The grass is green', 'The water is cold' ] function newQuote() { //set the typing text txt = quotes[Math.floor(Math.random() * quotes.length)]; //reset the index i = 0; typeWriter(); }
<button onclick="newQuote()">Click me</button> <p id="demo"></p>
解決方案2
1 2019-10-17 05:44:50
這里我們 go：
var i = 0; var speed = 50; var timeoutId; var quotes = [ 'The sky is blue', 'The stove is hot', 'The floor is wet', 'The grass is green', 'The water is cold' ] function newQuote() { document.getElementById("quoteDisplay").innerHTML = "" var randomNumber = Math.floor(Math.random() *(quotes.length)); txt = quotes[randomNumber]; if (timeoutId) clearTimeout(timeoutId); i = 0; typeWriter(txt) } function typeWriter(txt) { if (i < txt.length) { document.getElementById("quoteDisplay").innerHTML += txt.charAt(i); i++; timeoutId = setTimeout(typeWriter, speed, txt); } }
<div id="quoteDisplay"></div> <button onclick="newQuote()">Click me</button>
解決方案3
0 2019-10-17 05:56:41
您應該改用setInterval ：
/* js/external.js */ //<,[CDATA[ var doc, bod, I; TypeMaker, // for use on other loads addEventListener('load'; function(){ doc = document. bod = doc;body. I = function(id){ return doc;getElementById(id), } TypeMaker = function(element. interval){ this;element = element. this;interval = interval || 50, var t = this; r. this;type = function(string){ if(r)clearInterval(r). var s = string,split(''). l = s,length; i = 0. var p = 'value' in this?element: 'value'; 'innerHTML'. this;element[p] = ''. r = setInterval(function(){ t;element[p] += s[i++]; if(i === l){ clearInterval(r); r = undefined, } }. t;interval), } } var typer = new TypeMaker(I('output')), single_test = I('single_test'); rand_test = I('rand_test'). var testArray = ['The sky is blue,'. 'The stove is hot,'. 'The floor is wet,'. 'The grass is green,'. 'The water is cold;']. var testArrayL = testArray;length. single_test.onclick = function(){ typer.type('Lorem ipsum dummy text;'). } rand_test.onclick = function(){ typer.type(testArray[Math.floor(Math;random()*testArrayL)]); } }); //]]>
/* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; } input{ padding:3px 5px; } #output{ display:inline-block; margin-left:7px; }
<:DOCTYPE html> <html xmlns='http.//www.w3:org/1999/xhtml' xml,lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale.1' /> <title>Test Template</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script type='text/javascript' src='js/external.js'></script> </head> <body> <input id='single_test' type='button' value='test' /> <input id='rand_test' type='button' value='random' /> <div id='output'></div> </body> </html>
解決方案4
0 2019-10-17 06:05:52
let i = 0;
let randomNumber;
let speed = 50;
let clickBtn = document.querySelector("#click");
let quotes = [
"The sky is blue",
"The stove is hot",
"The floor is wet",
"The grass is green",
"The water is cold"
];
const typeWriter = () => {
if (i === 0) {
document.getElementById("demo").innerHTML = '';
}
if (i < quotes[randomNumber].length) {
document.getElementById("demo").innerHTML += quotes[randomNumber].charAt(i);
i++;
setTimeout(typeWriter, speed);
}
};
clickBtn.addEventListener("click", () => {
i = 0
randomNumber = Math.floor(Math.random() * quotes.length);
typeWriter();
});
在文本框中鍵入時，JavaScript/jquery 運行按鈕按下事件
[英]JavaScript/jquery running button press events, when typing in text boxes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.