Maison  >  Questions et réponses  >  le corps du texte

javascript - Il y a un problème avec la simulation de l'effet de frappe informatique à l'aide de JS natif. Pourriez-vous m'aider s'il vous plaît ?

<!--Veuillez copier et coller le code ci-dessous et exécutez-le dans le navigateur pour voir le problème-->
<!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='Ce programme veut d'abord Entrez tout le texte un par un et supprimez tout le texte un par un après trois secondes. Cependant, après l'avoir exécuté, j'ai constaté qu'il serait à nouveau supprimé après la suppression. S'il vous plaît, aidez-moi, merci ! '
//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>

怪我咯怪我咯2711 Il y a quelques jours486

répondre à tous(4)je répondrai

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:18:52

    Le problème réside dans la fonction lp()

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

    Ce qui est jugé ici est la valeur mais l'opération est contextLength, donc la fonction lp() provoque une boucle infinie.

    Expliquez la raison de la suppression deux fois : principalement la méthode slice()

    'string'.slice(0,n);

    Lorsque n est un nombre positif, il est exécuté dans l'ordre normal ; lorsque n est un nombre négatif, n sera remplacé par la longueur de la chaîne + n lors de l'exécution. Voir MDN pour plus de détails.
    Ainsi, après la première exécution de lop() supprime la chaîne à 0, la contextLength continue de diminuer de un, entraînant deux suppressions visuelles

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-19 10:18:52

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

    répondre
    0
  • 某草草

    某草草2017-05-19 10:18:52

    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);
        }
    }

    répondre
    0
  • 怪我咯

    怪我咯2017-05-19 10:18:52

    Enregistrez les mots dans un tableau, puis ajoutez et supprimez le tableau

    répondre
    0
  • Annulerrépondre