定时器应用案例

• 匀速运动
• 缓动运动. 偏移公式为: 起始距离 = 起始距离 + (目的距离 - 起始距离)/偏移系数(10)
• 长图轮播展示, 轮播图
• 发送验证码倒计时, 倒计时动态跳转

轮播图

• 问题: 连续点击, 发现图片又从第一张开始走

• 原因: 没点击一次, 会对index+1, 连续多次点击,index很快就>5了,会还原index

• 解决: 可以使用变量记录当前是否在做动画, 如果在做动画, 就结束往下执行

  var flag = false;
  if(flag == false){
      //更改动画状态, 并记录
      flag = true;
  }else{
      //正在动画
      return;
  }
  

• 在定时器中的使用this代指的事window 定时器属于顶层函数

  • 备份当前btn的this指针: var that = this;

动态跳转

• window.location.href = 'https://www.baidu.com/';

• 设置按钮的disabled属性的值

  • true 不可点击状态 | false 可点击

• 延时定时器 递归调用

    var count  = 5; 
    var timer = null;
    //开启定时器
    timer = setTimeout(arguments.callee, 1000);
  

节点操作

• DOM节点
  • 根据W3C的HTML DOM标准, HTML文档中的所有内容都是节点:
    • 整个文档是一个文档节点
    • 每个HTML元素是元素节点
    • HTML元素内的文本是文本节点
    • 每个HTML属性时属性节点
    • 注释是注释节点
  • 通过HTML DOM, 树种的所有节点均可通过JavaScript进行访问. 所有HTML元素(节点)均可被修改, 也可以创建或删除节点
• document.createElement('div');: 创建节点(div节点)
  • 参数: 标签名, 字符串
  • 返回值: 返回新创建的标签
  • 注意: 该方法由document调用
• insertBefore(new, inBefore): 插入元素- 由父节点调用的方法
  • 参数
    • 新节点: 要插入的节点
    • 插入到哪个节点的前面
  • 返回值: 插入的新节点
• appendChild(): 添加节点-父节点调用方法
  • 参数: 要添加的节点
  • 返回值: 要添加的节点
  • 注意点
    • 谁调用该方法, 节点就添加到谁身上
    • 该方法会在当前元素的末尾添加一个子节点
• removeChild(): 删除节点-父节点调用的方法
  • 参数和返回值: 要删除的节点
• replaceChild(): 替换节点-父节点调用方法
  • 参数: 替换的节点, 被替换的节点
  • 返回值: 被替换的节点
• cloneNode(): 克隆节点, 父节点调用方法
  • 参数: 布尔值
    • true会将当前节点里面所有子节点复制
    • false复制当前节点, 不复制子节点
  • 返回值: 克隆新节点

获取子节点方式

1. .childNodes: 获取子节点 返回一个数组(不建议使用)
   • nodeType根据nodeType值区分
   • 值为1 元素 | 2 属性 | 3 文本
2. .children: 获取所有的元素节点 返回所有元素数组
3. box.getElementsByTagName('*'): 使用通配符获取所有子元素标签(数组)

Document 对象方法补充

• getElementsByName(): 返回带有指定名称的节点对象的集合
  • 区别: 跟getElementsById方法不同的是, 通过元素的name属性查询元素, 而不是通过id属性
  • 注意
    • 因为文档中的name属性可能不唯一, 所有getElementsByName()方法返回的是元素的数组, 而不是一个元素
    • 和数组类似也有length属性, 可以和访问数组一样的方法来访问, 从0开始
• getAttribute(): 获取元素节点的属性名称获取属性的值
  • 语法: elementNode.getAttribute(name)
  • 说明
    • elementNode: 使用getElementById() getElementByTagName()等, 获取到的元素节点的方法
    • name: 要想查询的元素节点的属性名称

DOM对象常用方法