• js--09定时器


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
    </style>
    </head>
    
    <body>
    
    <input id="btn1" type="button" value="往后" />
    <input id="btn2" type="button" value="往前" />
    <div id="div1"></div>
    
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oDiv = document.getElementById('div1');
    
    oBtn1.onclick = function () {
        clearInterval( oDiv.timer );//开定时器之前要先停止定时器,停止div身上的timer,clearInterval(null/未定义)是可以的,
        oDiv.timer = setInterval(function () {//变量尽量不要放在外面
            var speed = parseInt(getStyle( oDiv, 'left' )) + -12;// getStyle( oDiv, 'left' )返回30px,parseInt()去掉px,
            if ( speed < 10 ) {//先控制speed,再将speed赋值给style.left,
                speed = 10;
            }
            oDiv.style.left = speed + 'px';
            if ( speed == 10 ) {
                clearInterval( oDiv.timer );
            }
        }, 30);
    };
    
    function getStyle ( obj, attr ) { //获取对象的属性,认识obj.currentStyle表示是IE6.7.8,不同的语法获取属性,
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; 
    }
    </script>
    
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
    </style>
    </head>
    
    <body>
    
    <input id="btn1" type="button" value="往上" />
    <input id="btn2" type="button" value="往下" />
    <div id="div1"></div>
    
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oDiv = document.getElementById('div1');
    
    oBtn1.onclick = function () {
        doMove ( oDiv, 'top', 12, 40 );
    };
    
    oBtn2.onclick = function () {
        doMove ( oDiv, 'top', 12, 500 );
    };
    
    function doMove ( obj, attr, dir, target ) {//把标签div对象传进来,dir是整数,attr是属性名,
        dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数,比目标位置大就是负数
        clearInterval( obj.timer );//给标签添加自定义属性
        obj.timer = setInterval(function () {
            var speed = parseInt(getStyle( obj, attr )) + dir;    
            if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
                speed = target;
            }
            obj.style[attr] = speed + 'px';//js修改样式
            if ( speed == target ) {
                clearInterval( obj.timer );
            }
        }, 30);
    }
    
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
    </script>
    
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
    </style>
    </head>
    
    <body>
    
    <input id="btn1" type="button" value="往上" />
    <input id="btn2" type="button" value="往下" />
    <div id="div1"></div>
    
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oDiv = document.getElementById('div1');
    
    oBtn1.onclick = function () {
        doMove ( oDiv, 'top', 12, 40 );
    };
    
    oBtn2.onclick = function () {
        doMove ( oDiv, 'top', 12, 500 );
    };
    
    function doMove ( obj, attr, dir, target ) {//把标签div对象传进来,dir是整数,attr是属性名,
        dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;//当前位置比目标位置小就是正数,比目标位置大就是负数
        clearInterval( obj.timer );//给标签添加自定义属性
        obj.timer = setInterval(function () {
            var speed = parseInt(getStyle( obj, attr )) + dir;    
            if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
                speed = target;
            }
            obj.style[attr] = speed + 'px';//js修改样式
            if ( speed == target ) {
                clearInterval( obj.timer );
            }
        }, 30);
    }
    
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
    </script>
    
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 { 100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
    </style>
    </head>
    
    <body>
    
    <input id="btn1" type="button" value="走" />
    <div id="div1"></div>
    
    <script>
    var oBtn1 = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    
    oBtn1.onclick = function () {
        // doMove ( oDiv, 'width', 34, 600 );
        doMove ( oDiv, 'left', 12, 900, function () {
            doMove ( oDiv, 'top', 34, 500 );//doMove有5个参数,这里传递4个也可以
        });
    
    };
    
    function doMove ( obj, attr, dir, target, endFn ) {
        dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
        clearInterval( obj.timer );
        obj.timer = setInterval(function () {
            var speed = parseInt(getStyle( obj, attr )) + dir;
            if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
                speed = target;
            }
            obj.style[attr] = speed + 'px';
            if ( speed == target ) {
                clearInterval( obj.timer );
                /*
                if ( endFn )   //函数不是undefined就执行
                    endFn();
                }
                */
                endFn && endFn(); // endFn 是真不是undefined就走到后面去
            }
        }, 30);
    }
    
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
    </script>
    
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>图片抖动</title>
    <style>
    img { position:absolute; top:200px; left:300px; 180px; }
    #img1 { left:100px; }
    </style>
    
    <script src="miaov.js"></script>
    <script>
    window.onload = function () {
        var oImg1 = document.getElementById('img1');
        var oImg2 = document.getElementById('img2');
        oImg1.onclick = fnShake;
        oImg2.onclick = fnShake;
        function fnShake() {
            var _this = this;//this是图片
            shake( _this, 'left', function(){
                shake( _this, 'top' );
            });
        }
    };
    
    function shake ( obj, attr, endFn ) {
        var pos = parseInt( getStyle(obj, attr) );//原来位置
        var arr = [];            // 20, -20, 18, -18 ..... 0
        var num = 0;
        var timer = null;    
        for ( var i=20; i>0; i-=2 ) {
            arr.push( i, -i );//push 2个
        }
        arr.push(0);
        clearInterval( obj.shake );
        obj.shake = setInterval(function (){
            obj.style[attr] = pos + arr[num] + 'px';//原来位置加上数组值
            num++;
            if ( num === arr.length ) {
                clearInterval( obj.shake );
                endFn && endFn();//左右抖动在上下抖动
            }
        }, 50);
    }
    </script>
    
    </head>
    
    <body>
    
    <img id="img1" src="img/4.jpg" />
    <img id="img2" src="img/5.jpg" />
    
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>图片抖动</title>
    <style>
    img { 100px; height:100px; position:absolute; top:200px; }
    </style>
    <script>
    
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
    
    function shake ( obj, attr, endFn ) {
        var pos = parseInt( getStyle(obj, attr) );// 抖动没有停止时候,获取的是抖动的位置,不是最初的位置,有隐患的
        var arr = [];            // 20, -20, 18, -18 ..... 0
        var num = 0;
        var timer = null;
        for ( var i=20; i>0; i-=2 ) {
            arr.push( i, -i );
        }
        arr.push(0);
        clearInterval( obj.shake );
        obj.shake = setInterval(function (){
            obj.style[attr] = pos + arr[num] + 'px';
            num++;
            if ( num === arr.length ) {
                clearInterval( obj.shake );
                endFn && endFn();
            }
        }, 50);
    }
    
    window.onload = function () {
        var aImg = document.getElementsByTagName('img');
        for ( var i=0; i<aImg.length; i++ ) {//遍历所有图片,所有图片加事件。
            aImg[i].style.left = 80+i*110 + 'px';
            aImg[i].onmouseover = function () {
                shake( this, 'top' );
            };
        }
    };
    </script>
    
    </head>
    
    <body>
    
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
    <img src="img/6.jpg" />
    <img src="img/7.jpg" />
    <img src="img/8.jpg" />
    
    </body>
    </html>
    function doMove ( obj, attr, dir, target, endFn ) {
        dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
        clearInterval( obj.timer );
        obj.timer = setInterval(function () {
            var speed = parseInt(getStyle( obj, attr )) + dir;            // 步长
            if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
                speed = target;
            }
            obj.style[attr] = speed + 'px';
            if ( speed == target ) {
                clearInterval( obj.timer );
                /*
                if ( endFn ) {
                    endFn();
                }
                */
                endFn && endFn();
            }
        }, 30);
    }
    
    function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
  • 相关阅读:
    canvas绘图详解-10-文字渲染
    canvas绘图详解-09-曲线的绘制原理
    websocket,vue链接
    JS 数组对象根据某一相同key合并成新的数组
    nuxt $axios访问多个服务器地址请求数据
    正则去除字符串中的html标签,但不去除<br>标签
    css多行文本溢出显示省略号(兼容ie)
    input accept
    jquery.toast
    jquery toast
  • 原文地址:https://www.cnblogs.com/yaowen/p/6836171.html
Copyright © 2020-2023  润新知