javascript - 如何通过单击 var phraseArray 句子上的按钮来添加 css 或 javascript 可重复打字机效果？

Question

我在 java 脚本中有五十个句子作为 var phraseArray。它们是在单击按钮时随机挑选的。我希望同一个按钮也能在那些 var phraseArray 句子上显示打字机效果，而不是一次，但能够在下次单击时重新启动或重置。不知道如何将此效果应用于 js 句子？

我试过用css做打字机效果，没用

代码链接> https://codepen.io/karolis-rusevicius/pen/vvpJLw

<button class="b" onclick="completeSentence(phraseArray, 'randomAdjective')"><span >Talk</span></button>

   <p id="randomAdjective" class="label label-success"><blink>_</blink>`</p>`
function PickRandomWord(frm) {

// Generate a random number between 1 and NumberOfWords

var rnd = Math.ceil(Math.random() * NumberOfWords)

// Display the word inside the text box
frm.WordBox.value = words[rnd]}

var phraseArray = [
               "Androids dream of electric sheep at the              incubators<blink>_</blink>",

               "Robot will feed you tomatoes while you run<blink>_</blink>",

               "Just like the simulations<blink>_</blink>",

               "Read the manual while farming<blink>_</blink>",

               "Just Quick and easy hardware muffin with electric simulations on top<blink>_</blink>",

               "I thought bitmap asteroids would fit here<blink>_</blink>",

               "In this world virtual reality is created for laboratory animals<blink>_</blink>",

               "Cyborg bacteria outperforms digital pigeons at farming funny jokes<blink>_</blink>",

               "Bacteria recognition systems are virtual, just like reality<blink>_</blink>",

               "Simulations are created for neural patterns<blink>_</blink>",

               "new software update is available! At our laboratory<blink>_</blink>",

               "We have updated our privacy policy, please accept it at our neural laboratory<blink>_</blink>",

               "By accepting our policy, you agree to our upgraded terms and androids<blink>_</blink>",

               "My hardware feed the digital software<blink>_</blink>",

               "My computers run all the simulations<blink>_</blink>",

               "The sky is very #6698FF today<blink>_</blink>",

               "Here are bitmap asteroids spilled all over the reality<blink>_</blink>",

               "The created robot entered the cyborg forest<blink>_</blink>",

               "Androids skin is soft as rubber soft gets, just like humanoid rubber<blink>_</blink>",

               "I will fit in this humanoid tisue, no cyborg bacteria can attack me while I wear it.<blink>_</blink>",

               "Would you consider donating your hardware ? It can save meany robot lives<blink>_</blink>",

               "Humanoid software is fit for farming, bitmap asteroids dont lie.<blink>_</blink>",

               "We have created a new policy, no pants are allowed in our reality. All users will degrade to digital pigeons<blink>_</blink>",

               "Pigeons fly, but in digital reality, they run the marathons<blink>_</blink>",

               "Electric squirrels are demaging our neural software while they feed on our cyborg bacteria<blink>_</blink>",

               "Humanoid beeings are sickly. I mean you are fragile, we need to run you throught neural laboratory<blink>_</blink>",

               "Do animals fly throught bitmap arcks?<blink>_</blink>",

               "The new policy allows farming on the outskirts of humanoid laboratory<blink>_</blink>",

               "How is your hardware ? You can replace it at our world<blink>_</blink>",

               "You know, the robot behind you is just recording.<blink>_</blink>",

               "Asteroids...ahhh. If only I could infuse them with pigeons...<blink>_</blink>",

               "Dont assume cyborg hardware<blink>_</blink>",

               "To be virtual bacteria or not to be?<blink>_</blink>",

               "Upgraded androids prooved. Simulations can exist in virtual world<blink>_</blink>",

               "Here is a joke for you: what do you call a robot without tea? A robo<blink>_</blink>",

               "Today it is bitmap world day!! Happy bitmaping!<blink>_</blink>",

               "While I run the policy of million'o'muffins a day, you can have one<blink>_</blink>",

               "Pigeons have updated software<blink>_</blink>",

               "If I get elected, asteroids will have rights to fly above<blink>_</blink>",

               "Virtual computers like compliments<blink>_</blink>",

               "I should go back to farming digital protons...<blink>_</blink>",

               "Shlugs would like to have some spare electric rods<blink>_</blink>",

               "Here we feed neural computers<blink>_</blink>",

               "teach computers how to eat and they will feed them selfs<blink>_</blink>",

               "I have created electric metal brush, keeps your metal fresh<blink>_</blink>",

               "In this world it is posible for computers to achieve motherhood<blink>_</blink>",

              ];





function randomIndex(arr){
  return Math.floor((Math.random() * arr.length));
}

function completeSentence(arr, loc){
  index = randomIndex(arr);
  document.getElementById(loc).innerHTML = arr[index];
}

Answer 1

你想要这样的codepen吗:

Link

添加了以下代码段:

function completeSentence(arr, loc){
  index = randomIndex(arr);
  var str = arr[index];
  for(let i=0; i<str.length; i++){
    setTimeout(function(){
   document.getElementById(loc).innerHTML = str.substr(0,i);
  },500+i*80);
}