js基础--倒计时+逐字显示小案例

鱼与云游

已于 2022-12-17 13:22:12 修改

阅读量176

点赞数

文章标签： javascript 前端 html css3 html5

于 2022-12-17 12:47:53 首次发布

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128352336

版权

思路

首先设置两个盒子，获取两个盒子，在者写事件，先写outside这个，函数f1，在设置定时器，根据定时器原理，设置一个倒计时，在者设置inside函数f2，设置逐字显示效果，最后别忘了，到时间清除定时效果

代码

<body>
    <div class="red" style="width: 200px;height: 200px;border: 1px solid black;"></div>
    <div class="read" style="width: 300px; height: 300px; border: 1px solid yellow; display: none;"></div>
    <script>
        var outside=document.querySelector('.red');
        var inside=document.querySelector('.read');
        var flag=5;
        var i=0;
        var str="Hellow 我是落尘近";
        window.addEventListener('load',function(){
            var timer=setInterval(f1,1000);
            var timers=setInterval(f2,1000);
            function f1(){
                if(flag==0){
                    clearInterval(timer);
                    outside.style.display='none';
                    inside.style.display='block';
                }
                else{
                    outside.innerHTML=flag;
                    flag--;
                }
            }
            f1();
            function f2(){
                if(str.length==i){
                    clearInterval(timers);
                }
                else{
                    inside.innerHTML+=str.charAt(i);
                    i++;
                }
            }
            f2();
        })
    </script>
</body>
</html>