我有一個簡單的影片代碼，看起來像控制臺輸入。
原文來自：
代碼：
<script>
//console
var textarea = $('.term');
var text = 'ping life';
var i = 0;
runner();
function runner() {
textarea.append(text.charAt(i));
i ;
setTimeout(
function () {
runner();
}, Math.floor(Math.random() * 1000) 50);
}
</script>
現在我想要的效果有點復雜，至少對我來說，因為我對 JQuery 的了解是有限的。我希望代碼輸入ping life，然后完全退格，無限重復。我查看了如何使用（8）的轉義序列在 JQuery 中模擬退格，但我不確定如何使用轉義序列，也不確定如何將函式實作到現有的遞回函式中，以使其無限重復。
任何幫助都會很棒:)
uj5u.com熱心網友回復：
像這樣？像這樣計數會產生曲折的計數模式。我為輸入的開始和結束添加了緩沖區，并為洗掉字母添加了固定超時。
textarea.text(text.substr(0, i))選擇文本的子字串（視為字母陣列 - 選擇索引 0 和 i 之間的所有內容）
比添加和洗掉字母更容易
var direction = 1;
var i = 0;
var textarea = $('.term');
var text = 'ping life';
// NOTE:
// I added the "@dev:~$ " as css:before elem, easier to write the code
function count() {
i = direction;
direction *= (((i % text.length) == 0) ? -1 : 1);
textarea.text(text.substr(0, i));
clearInterval(time);
// direction is 1 if counting up
if (direction === 1) {
if (i === 0) {
// buffer for start
time = setInterval(count, 1000);
} else {
time = setInterval(count, Math.floor(Math.random() * 1000) 50);
}
} else {
// direction is -1 if counting down
if (i === text.length) {
time = setInterval(count, 1500);
} else {
// buffer for end
time = setInterval(count, 100);
}
}
}
// inital interval
// setTimeout doesn't work well here
var time = setInterval(count, 1000)html,
body {
margin: 0 auto;
height: 100%;
}
pre {
padding: 0;
margin: 0;
}
pre::before {
content: "@dev:~$ ";
color: white;
}
.load {
margin: 0 auto;
min-height: 100%;
width: 100%;
background: black;
}
.term {
font-family: monospace;
color: #fff;
opacity: 0.8;
font-size: 2em;
overflow-y: auto;
overflow-x: hidden;
padding-top: 10px;
padding-left: 20px;
}
.term:after {
content: "_";
opacity: 1;
animation: cursor 1s infinite;
}
@keyframes cursor {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="load">
<pre class="term"></pre>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485378.html