css基础–设计动画1（setTimeout和setInterval）

在JavaScript中设计动画，主要是利用循环体和定时器（setTimeout和setInterval）来实现，

动画的设计思路：通过循环改变元素的某个CSS样式属性，从而达到动态效果，如移动位置、缩放大小、渐隐渐显等

—–高频率 小步伐 快速修改样式属性值

例：为集合中每个元素都绑定一个事件延时处理函数

<p>p1</p>
        <p>p2</p>
        <script type=”text/javascript”>
            var o=document.getElementsByTagName(“body”)[0].childNodes;//获取body元素下的所有子元素
            for (var i=0;i<o.length;i++){

                o[i].οnmοuseοver=function(i){

                    return function(){

                        f(o[i]);
                        }
                }(i);
                o[i].οnmοuseοut=function(i){

                    return function(){

                        clearTimeout(o[i].out);
                        }
                }(i);
            }
//            function f(o){

//                var out = setTimeout(function(){

//                    alert(o.tagName);
//                },500);
//            }
            
            function f(o){//为了防止混淆多个注册的延时处理函数，分别把不同元素的延时处理函数的引用存储在该对象的out属性中
                o.out = setTimeout(function(){

                    alert(o.tagName);
                },500);
            }
   </script>

、2、setTimeout（）方法只能够被执行一次，如果希望反复执行该方法中的代码，则应该在该方法中 对 自身的调用
        <input type=”text”  value=”” />
        <script type=”text/javascript”>
            var t=document.getElementsByTagName(“input”)[0];
            var i=1;
            function f(){

                var out=setTimeout(function(){

                    t.value=i++;
                    f();//方法中对自身调用
                },1000);
                if(i>10){//如果超过10次，则清除 执行，并提示信息
                    clearTimeout(out);
                    alert(“10秒钟已到”);
                }
            }
            f();

3、、使用setInterval(f,1000)替代 setTimeout()的自调用

 <input type=”text”  value=”” />
        <script type=”text/javascript”>      

var t=document.getElementsByTagName(“input”)[0];
            var i=1;
            var out = setInterval(f,1000);
            function f(){

                    t.value=i++;
                if(i>10){

//                    clearInterval(out);//这里跟  clearTimeout(out);等效
                    clearTimeout(out);
                    alert(“10秒钟已到”);
                }
            }
            
        </script>