javascript - Es gibt ein Problem bei der Simulation des Computer-Schreibeffekts mit nativem JS. Bitten Sie um Hilfe.
怪我咯
怪我咯 2017-05-19 10:16:52
0
4
531

<!--Bitte kopieren Sie den Code unten, fügen Sie ihn ein und führen Sie ihn im Browser aus, um das Problem zu sehen-->
<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8'>
<title>打字机效果</title>
<style> 
#main{ 
    border: 1px solid #ccc;
    height:100px;
    width:1000px;
}
</style>

</head>
<body>
<p id='main'></p>
<script type="text/javascript">
var context='Dieses Programm möchte zuerst Geben Sie den gesamten Text einzeln ein und löschen Sie ihn nach drei Sekunden. Nach dem Ausführen stellte ich jedoch fest, dass er nach dem Löschen wieder gelöscht wird. Bitte helfen Sie mir, danke! '
//console.log(a.length)
var contextLength=Number(0)
var writecontext=document.querySelector('#main')
function loop(){

return new Promise(function(sol,rej){ 
    function lop(){ 
        var t=setTimeout(function(){ 
            if(contextLength<context.length){ 
                writecontext.innerHTML=context.slice(0,contextLength++)+'_'
                lop()
            }
            else{ 
                if(contextLength=context.length){ 
                    setTimeout(function(){ 
                        clearTimeout(t)
                        sol(contextLength)
                    },3000)
                }
            } 
        },200) 
    }
    lop()
})

}

loop().then(function(value){

    function lp(){ 
        var n=setTimeout(function(){ 
            if(value>0){ 
                writecontext.innerHTML=context.slice(0,contextLength--)+'_'
                lp()
            }else{ 
                if(value<=0){ 
                    clearTimeout(n)
                }
            } 

        },50)
    }
    lp()

})
</script>
</body>
</html>

怪我咯
怪我咯

走同样的路,发现不同的人生

Antworte allen(4)
曾经蜡笔没有小新

问题出在lp()函数中

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

此处判断的是value但是操作的是contextLength,所以导致lp()函数死循环。

解释下删除两次的原因:主要是slice()方法

'string'.slice(0,n);

当n是正数时按照正常顺序执行;当n是负数时,执行时n会被替换成字符串长度+n,具体查看MDN。
所以,第一次执行lop()字符串删除到0之后,contextLength继续减一,导致了视觉上删除了两次

Ty80

你写的lp函数其实是无限循环函数来的,需要把lp函数下的contextLength--改为value--,且需要把value > 0改为value >= 0

某草草
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);
    }
}
刘奇

把字存成一个数组,然后对数组实现增删

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage