吸顶条
原理:滚动高度 >= div距离上面的绝对距离 时将div固定定位 TOP = 滚动高度。
<b>代码</b>
<script>
function (obj) {
var l = 0;
var t = 0;
while (obj) {
l += obj.offsetLeft;
t + = obj.offsetTop;
obj = obj.offsetParent;
}
}
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
// 求出DIV1 距离上面的一个绝对位置
var iDivT = getPos(oDiv).top;
window.onscroll = function () {
//滚动高度
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
//滚动高度大于等于DIV1距离上面的绝对距离的时候就定位
if (scrollT >= iDivT) {
//判断是否IE6
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 ) {
oDiv.style.position = 'absolute';
oDiv.style.top = scrollT + 'px';
} else {
oDiv.style.position = 'fixed';
oDiv.style.top = 0;
}
oDiv.style.left = '0';
//让DIV2显示占Div1 的位置;
oDiv2.style.display = 'block';
} else {
oDiv.style.postion = '';
oDiv2.style.display ='none';
}
};
}
</script>
关于添加元素:
a).父级.appendChild();
父级.insertBefore();
b ). innerHTML
会出现的问题:会把之前元素身上的事件给清空了
原因:它会先清空所有的,在添加
文本提示框:
文本框 -> oT
获取焦点
oT.onfocus -> 获取焦点的时候
失去焦点
oT.onblur -> 失去焦点的时候
强制获取焦点
oT.focus();
强制失去焦点
oT.blur();
预加载:
偷偷摸摸加载
用户体验好一点
<b>创建图片:</b>
a). createElement('img');
b). new Image();
<b>图片身上的事件:</b>
当加载成功的时候
oImg.onload
当加载失败的时候
oImg.onerror
进度条比例:
n/10 -> 比例
变化的数/定死的数
<b>保留两位小数:</b>
toFixed(保留小数的位数);
自动进位(四舍五入)
表单:(form)
给后台提交数据
想要提交数据:
form必须要有的:
1、action:提交的地址
2、name: 数据名称
3、value: 数据
method 提交方式:默认get
get: 不安全 容量32K 有缓存
post: 相对安全 容量1G 没有缓存
缓存(cache):
对于浏览器来说一个地址只会访问一次
get好处:分享、收藏
关于父级
parentNode -> 结构上的父级
祖宗(最大父级):document
offsetParent -> 定位上的父级
祖宗(最大父级):body