Запустите анимацию текста по нажатию кнопки, очистите и запустите анимацию снова, если кнопка нажата снова - PullRequest
Новая
       16

Запустите анимацию текста по нажатию кнопки, очистите и запустите анимацию снова, если кнопка нажата снова

0 голосов
/ 25 июня 2019

Я взял этот фрагмент кода из проекта, над которым я работаю с несколькими друзьями, и ищу немного знаний о том, как заставить функцию не активироваться до нажатия кнопки. Кроме того, если бы анимация могла быть перезапущена при каждом нажатии кнопки, это было бы здорово.

Я попытался использовать: 

//  $('#savebtn').onClick(function(){
//  $('#setupTypewriter').addClass('typewriter');
//  });

и 

$('#savebtn').onClick(function(){
setupTypewriter('typewriter');
});

в файле js безрезультатно. Я, вероятно, упускаю что-то совершенно очевидное, что подхватит второй набор глаз, поскольку я - любитель-кодер.

Кроме того, если вы заметили, что случайные элементы / код обращаются к чему-то еще в фрагментах, которые я разместил, они, вероятно, не нужны, но я просто вырвал весь этот код из более крупного проекта, как я упоминал: P 

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 1,
    tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 0;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 0;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}

var typer = document.getElementById('typewriter');

typewriter = setupTypewriter(typewriter);

typewriter.type();
.colbtns {
  left: 115px;
  bottom: 37.5px;
  position: relative;
  width: 140px;
  z-index: 3;
}

.colbtnd {
  left: 115px;
  bottom: 37px;
  position: relative;
  width: 140px;
  z-index: 3;
}

.ecutext-container {
  background-color: #000000;
  border-radius: .25rem;
  position: relative;
  height: 235px;
  width: 380px;
  left: 413px;
  bottom: 0px;
  z-index: 1;
}

.col {
  color: #fff;
}

.text-muted {
  color: #fff!important;
}

.btn-success {
  color: #fff;
  background-color: #1a75ff;
  border-color: #1a75ff;
}

.btn-success:hover {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.btn-success:active {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.btn-success:focus {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.ui-widget-content {
  border: 1px solid;
  border-color: #fff;
  background-color: #1a75ff;
  background: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #fff;
}

.slider {
  border: 1px solid;
  border-color: #fff;
  background-color: #fff;
}

#boost {
  color: #fff;
}

.var-highlight {
  color: #008ae6;
}

.string-highlight {
  color: #008ae6;
}

#typewriter {
  padding-top: 5px;
  font-size: 10px;
  color: #fff;
  margin: 0;
  overflow: hidden;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  &:after {
    content: "|";
    animation: blink 500ms linear infinite alternate;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!doctype html>



  
  
  
  
  
  
  
  
  
  
  
  



  
    
 Init lmECU.exe = {
--------------------------------
 lmECU:\ validating engineer key
 lmECU:\ validation success
 lmECU:\ accessing sensors
 lmECU:\ parsing senslog.xml
 lmECU-senslog:\ running diagnostics
  		 - {0 faults detected
 lmECU:\ applying Modifications...
 lmECU:\ generating senslog.xml
 lmECU:\ parsing senslog.xml
 lmECU-senslog:\ running diagnostics
		 - {0 faults detected
 lmECU:\  ECU remap successful
 lmECU:\  end lmECU.exe
...