javascript - There is a problem with simulating computer typing effect using native js, please ask for help?

Question

&lt;!--Please copy and paste the code below and run it in the browser to see the problem--&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; {code...} &lt; /head&gt;&lt;body&gt;&lt;div id='main'&gt;&amp

曾经蜡笔没有小新 · Answer

The problem lies in the lp() function

if(value>0){
   writecontext.innerHTML=context.slice(0,contextLength--)+'_'
   lp()
   }else{...}

What is judged here is value but the operation is contextLength, so the lp() function causes an infinite loop.

Explain the reason for deleting twice: mainly the slice() method

'string'.slice(0,n);

When n is a positive number, it is executed in the normal order; when n is a negative number, n will be replaced by the string length + n during execution. See MDN for details.
So, after the first execution of lop() deletes the string to 0, the contextLength continues to decrease by one, resulting in two visual deletions

PHP中文网 · Answer

Written by youlp函数其实是无限循环函数来的，需要把lp函数下的contextLength--改为value--，且需要把value > 0改为value >= 0

某草草 · Answer

var context='这个程序是想先输逐个出所有文字，三秒钟以后逐个删除所有文字，但是运行以后发现删除到头又会重新删除一遍，请大神帮忙看看，谢谢！';

var contextLength=Number(0)
var writecontext=document.querySelector('#main')
var t1,t2;
t1 = setInterval('write()',100);
function write(){ 
    if(contextLength<=context.length){ 
        writecontext.innerHTML=context.slice(0,contextLength++)+'_'
    }
    else{
        clearInterval(t1);
        setTimeout(function(){
            t2 = setInterval('clear()',100);
        },1000);
    }
}
function clear(){
    if(contextLength>=0){
        writecontext.innerHTML=context.slice(0,contextLength--)+'_'
    }else{
        clearInterval(t2);
    }
}

怪我咯 · Answer

Save the words into an array, and then add and delete the array

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial