2-requestAnimationFrame、循环字母

最新推荐文章于 2024-07-18 17:32:29 发布

valueyear

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量57

点赞数

分类专栏： HTML5 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_43714814/article/details/121735966

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

requestAnimationFrame

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>requestAnimationFrame</title>
 </head>
 <body>
     <div id="container"> 
         <h1 id="letter">a</h1>
    </div>
    <script type="text/javascript">
        var letter = document.getElementById('letter'),
             framePerSecond = 10;

        var requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
        
        // 26个英文字母的数组
        var letters = "abcdefghijklmnopqrstuvwxyz".split('');

        function cycleLetter(){
            setTimeout(function(){
                requestAnimationFrame(cycleLetter);
                var curLetter, idx;
                idx = Math.floor(Math.random() * letters.length);
                curLetter = letters[idx];
                letter.innerHTML = curLetter;
            }, 1000 / framePerSecond)
        }

        cycleLetter();
    </script>
    
 </body>
 </html>

cancelAnimationFrame

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>requestAnimationFrame</title>
 </head>
 <body>
     <div id="container"> 
         <h1 id="letter">a</h1>
    </div>
    <script type="text/javascript">
        var letter = document.getElementById('letter'),
            running = true,
            requestID; //保存requestAnimationFrame的ID的一个变量
        
        // 设置一个点击的事件监听器
        letter.addEventListener('click',stopAnimation,false);    

        
        // 26个英文字母的数组
        var letters = "abcdefghijklmnopqrstuvwxyz".split('');

        function cycleLetter(){              

                if(running){
                    var curLetter, idx;

                    idx = Math.floor(Math.random() * letters.length);
                    curLetter = letters[idx];
                    letter.innerHTML = curLetter;
                }  
                
                requestID = requestAnimationFrame(cycleLetter);
       
        }

        // 阻止动画
        function stopAnimation(){
            cancelAnimationFrame(requestID);
        }

        cycleLetter();
    </script>
    
 </body>
 </html>

valueyear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-requestAnimationFrame、循环字母

requestAnimationFrame <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫