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重点突出某些文字的方法=。=！