php培训学习记录 第六、七天

div + css 盒子模型

这两天培训班教的都是这个，一天是position的定位，后一天是float的浮动，没有什么好说的，应该是前端的页面排版的基础知识，，可以写几个网页直接去熟悉，没有感受到这边的老师讲了有什么新内容。毕竟这一块的内容也比较少，又简单。

惯例，虽然简单，思维导图

刚好六七这两天中间是贯穿了一个国庆节和中秋节，回家去了，那天没有写文字，所以全部都凑到今天把。

还有些其他的内容需要记录一下，教的都很基础，自己看了js运动基础一些内容，写在下面：

JavaScript的运动基础模型

var time = null; // 一定要先定义 不然提前取消定时器 的语句会无效，导致程序无法运行
    function startmove() {
        var run = document.getElementById("run");
//            var start=document.getElementsByTagName("input")[0];
        var speed=10;
        clearInterval(time);  //防止多次调用会加速变化
        time = setInterval(function () {
            if (run.offsetLeft >= 1000) {
                clearInterval(time);   //设置停止定时器的条件
            } else {
                run.style.left = run.offsetLeft + speed + "px";
                //  style.left 是可读写数据，而offsetLeft是只读数据
                //  style.left 是字符串需要“px"  ,而offsetLeft是数字数据可以直接运算
                // style.left需要在HTML中定义，不然不能直接获取到，而offsetLeft可以直接获取
            }
        }, 30);
    }

js设置运动的思路：
1、设置定时器之前要先取消，为了避免多次调用产生的叠加，
2、if条件语句设置停止条件，else并列循环运行条件
3、定义speed 来控制速度，还可以用正负号控制变化方向
4、记得捋清楚 style.left and offsetLeft 的三个区别

两个小案例的代码就不贴了，还有一个重点

简化代码

最简单简化的方法：把不一样的地方找出来，当成函数传进去。
寻找不同点，speed正负号的不同，停止判断位置的不同

简单对比：

 <script>
    window.onload = function () {
        var list = document.getElementById("list");
        var one = document.getElementById("one");
        list.onmouseover = function () {
            startmove();
        };
        list.onmouseout = function () {
            startmove1();//
        }
    };
    var time = null;
    function startmove() {
        var speed = 10;
        clearInterval(time);
        time = setInterval(function () {
            if (list.offsetLeft >= 0) {
                clearInterval(time);
            } else {
                list.style.left = list.offsetLeft + speed + "px";
            }
        }, 30);
    }
    function startmove1() {
        var speed = -10;
        clearInterval(time);
        time = setInterval(function () {
            if (list.offsetLeft <= -150) {
                clearInterval(time);
            } else {
                list.style.left = list.offsetLeft + speed + "px";
            }
        }, 30);
    }
</script>

简化后

将speed 和 停止位置 都用变量代替

<script>
    window.onload = function () {
        var list = document.getElementById("list");
        var one = document.getElementById("one");
        list.onmouseover = function () {
            startmove(10,0);//
        };
        list.onmouseout = function () {
            startmove(-10,-150);//
        }
    };
    var time = null;
    function startmove(speed,target) {
//            var speed = 10;
        clearInterval(time);
        time = setInterval(function () {
            if (list.offsetLeft == target) {
                clearInterval(time);
            } else {
                list.style.left = list.offsetLeft + speed + "px";
            }
        }, 30);
    }
</script>

再次简化，减少speed变量 用if语句代替

<script>
    window.onload = function () {
        var list = document.getElementById("list");
        var one = document.getElementById("one");
        list.onmouseover = function () {
            startmove(0);
        };
        list.onmouseout = function () {
            startmove(-150);
        }
    };
    var time = null;
    function startmove(target) {
//            var speed = null;
        if(list.offsetLeft<target){  ///
            speed=10;  /
        }else{   
            speed=-10; 
        }
        clearInterval(time);
        time = setInterval(function () {
                if (list.offsetLeft == target) {
                clearInterval(time);
            } else {
                list.style.left = list.offsetLeft + speed + "px";
            }
        }, 30);
    }
</script>

到此为止，，，，，，，，，

=。=！ 写很长的只是因为还没有找到markdown重点突出某些文字的方法=。=！