选项卡-定时器-一些效果
一、js获取节点方式
获取方式 | 区别解释 |
---|---|
getElementById | 根据id获取,调用对象只能是docoument |
getElementsByName | 根据name获取,调用对象只能是document |
getElementsByClassName | 根据class获取,调用对象可以是父级和document(不兼容ie8-) |
getElementsByTagName | 根据标签获取,调用对象可以是父级和document |
二、获取HTML属性和CSS属性
1、获取html属性 直接 对象.属性名
2、获取class className
3、获取css属性 对象.style.属性名
4、css中所有 background-color 这种格式的 在js中 都换成 backgroundColor
三、获取标签内容
1、innerText 获取纯文本内容
2、innerHTML 获取带标签的文本内容
四、遍历对象
var oDiv = document.getElementById('div');
for (var i in oDiv.style) {
console.log(i);
}
五、选项卡
六、获取非行内样式
1、高级浏览器
getComputedStyle(obj, null).属性
2、低级浏览器
obj.currentStyle[属性]
3、兼容性写法
//兼容性写法
function getStyle(obj, name)
{
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj)[name];
}
七、定时器
1、一次性定时器
setTimeout 设置定时器
clearTimeout 清空定时器
var timer = setTimeout(function () {
alert('弹我');
},5000);
clearTimeout(timer);
2、周期性定时器
setInterval 设置定时器
clearInterval 清空定时器
var timer = setInterval(function () {
document.write(1);
}, 1000);
clearInterval(timer);
说明:
1、第二个参数是时间 单位是 ms 1000=1s
2、一般都会定义个变量保存定时器 方便清空 timer
八、一些小小鬼
1、汤唯消失
2、计数器
补零函数
function buling(n)
{
return n < 10 ? '0' + n : n;
}
3、钟表
- Date 内置对象 日期对象
4、倒计时
5、电梯
6、自动播放选项卡
7、弹弹弹
作业
1、购物车加减
2、电梯
1、从下到上 1楼在最下面
2、有上楼下楼
3、当前楼层上下楼
4、不要重复触发定时器
5、跳转楼层限定
提示:
下标倒叙
var timer = null
计算时要注意数据类型