我已经从与几个朋友一起工作的项目中摘录了这段代码，并且我正在寻找一些知识，以使某个功能在单击按钮之前无法激活。另外，如果每次单击按钮都可以重新启动动画，那就太好了。
我尝试使用：
// $('#savebtn').onClick(function(){
// $('#setupTypewriter').addClass('typewriter');
// });
和
$('#savebtn').onClick(function(){
setupTypewriter('typewriter');
});
无济于事。我可能会错过一些非常明显的东西，因为我是一名业余编码员，所以第二眼会冒出来。
此外，如果您发现随机的元素/代码调用了我发布的代码片段中的其他内容，则它们可能是不必要的，但我只是将所有这些代码从更大的项目中剔除了，就像我提到的：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>