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