Question

我已经从与几个朋友一起工作的项目中摘录了这段代码，并且我正在寻找一些知识，以使某个功能在单击按钮之前无法激活。另外，如果每次单击按钮都可以重新启动动画，那就太好了。

我尝试使用：

//  $('#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>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="custom.css">
  <link rel="stylesheet" type="text/css" href="textanim.css">
</head>

<body>
  <div class="ecutext-container">
    <pre id="typewriter">
 <span class="var-highlight">Init</span> lmECU.exe = {
<span class="string">--------------------------------</span>
 lmECU:\ <span class="string">validating engineer key</span>
 lmECU:\ <span class="string">validation success</span>
 lmECU:\ <span class="string">accessing sensors</span>
 lmECU:\ <span class="string">parsing senslog.xml</span>
 lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
  		 <span class="string-highlight">- {0 faults detected</span>
 lmECU:\ <span class="string">applying Modifications...</span>
 lmECU:\ <span class="string">generating senslog.xml</span>
 lmECU:\ <span class="string">parsing senslog.xml</span>
 lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
		 <span class="string-highlight">- {0 faults detected</span>
 lmECU:\  <span class="string">ECU remap successful</span>
 lmECU:\  <span class="string">end lmECU.exe</span>
					<br></br>
					</pre>
  </div>
  <div class="savebtn">
    <div class="colbtns"><button class="btn btn-success form-control" id="savebtn">SAVE</button></div>
  </div>
  <div class="colbtnd"><button class="btn btn-success form-control" id="defaultbtn">DEFAULT</button></div>
  </div>
  </div>
  </div>
  <script src="config.js"></script>
  <script src="index.js"></script>
  <script src="textanim.js"></script>
</body>

</html>

单击按钮时开始文本动画，如果再次单击按钮，则清除并重新开始动画

0 个答案: