JavaScript学习笔记02

选项卡-定时器-一些效果

一、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

​ 计算时要注意数据类型