定時器應用案例

• 勻速運動
• 緩動運動. 偏移公式為: 起始距離 = 起始距離 + (目的距離 - 起始距離)/偏移系數(shù)(10)
• 長圖輪播展示, 輪播圖
• 發(fā)送驗證碼倒計時, 倒計時動態(tài)跳轉(zhuǎn)

輪播圖

• 問題: 連續(xù)點擊, 發(fā)現(xiàn)圖片又從第一張開始走

• 原因: 沒點擊一次, 會對index+1, 連續(xù)多次點擊,index很快就>5了,會還原index

• 解決: 可以使用變量記錄當前是否在做動畫, 如果在做動畫, 就結(jié)束往下執(zhí)行

  var flag = false;
  if(flag == false){
      //更改動畫狀態(tài), 并記錄
      flag = true;
  }else{
      //正在動畫
      return;
  }
  

• 在定時器中的使用this代指的事window 定時器屬于頂層函數(shù)

  • 備份當前btn的this指針: var that = this;

動態(tài)跳轉(zhuǎn)

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

• 設(shè)置按鈕的disabled屬性的值

  • true 不可點擊狀態(tài) | false 可點擊

• 延時定時器 遞歸調(diào)用

    var count  = 5; 
    var timer = null;
    //開啟定時器
    timer = setTimeout(arguments.callee, 1000);
  

節(jié)點操作

• DOM節(jié)點
  • 根據(jù)W3C的HTML DOM標準, HTML文檔中的所有內(nèi)容都是節(jié)點:
    • 整個文檔是一個文檔節(jié)點
    • 每個HTML元素是元素節(jié)點
    • HTML元素內(nèi)的文本是文本節(jié)點
    • 每個HTML屬性時屬性節(jié)點
    • 注釋是注釋節(jié)點
  • 通過HTML DOM, 樹種的所有節(jié)點均可通過JavaScript進行訪問. 所有HTML元素(節(jié)點)均可被修改, 也可以創(chuàng)建或刪除節(jié)點
• document.createElement('div');: 創(chuàng)建節(jié)點(div節(jié)點)
  • 參數(shù): 標簽名, 字符串
  • 返回值: 返回新創(chuàng)建的標簽
  • 注意: 該方法由document調(diào)用
• insertBefore(new, inBefore): 插入元素- 由父節(jié)點調(diào)用的方法
  • 參數(shù)
    • 新節(jié)點: 要插入的節(jié)點
    • 插入到哪個節(jié)點的前面
  • 返回值: 插入的新節(jié)點
• appendChild(): 添加節(jié)點-父節(jié)點調(diào)用方法
  • 參數(shù): 要添加的節(jié)點
  • 返回值: 要添加的節(jié)點
  • 注意點
    • 誰調(diào)用該方法, 節(jié)點就添加到誰身上
    • 該方法會在當前元素的末尾添加一個子節(jié)點
• removeChild(): 刪除節(jié)點-父節(jié)點調(diào)用的方法
  • 參數(shù)和返回值: 要刪除的節(jié)點
• replaceChild(): 替換節(jié)點-父節(jié)點調(diào)用方法
  • 參數(shù): 替換的節(jié)點, 被替換的節(jié)點
  • 返回值: 被替換的節(jié)點
• cloneNode(): 克隆節(jié)點, 父節(jié)點調(diào)用方法
  • 參數(shù): 布爾值
    • true會將當前節(jié)點里面所有子節(jié)點復制
    • false復制當前節(jié)點, 不復制子節(jié)點
  • 返回值: 克隆新節(jié)點

獲取子節(jié)點方式

1. .childNodes: 獲取子節(jié)點 返回一個數(shù)組(不建議使用)
   • nodeType根據(jù)nodeType值區(qū)分
   • 值為1 元素 | 2 屬性 | 3 文本
2. .children: 獲取所有的元素節(jié)點 返回所有元素數(shù)組
3. box.getElementsByTagName('*'): 使用通配符獲取所有子元素標簽(數(shù)組)

Document 對象方法補充

• getElementsByName(): 返回帶有指定名稱的節(jié)點對象的集合
  • 區(qū)別: 跟getElementsById方法不同的是, 通過元素的name屬性查詢元素, 而不是通過id屬性
  • 注意
    • 因為文檔中的name屬性可能不唯一, 所有g(shù)etElementsByName()方法返回的是元素的數(shù)組, 而不是一個元素
    • 和數(shù)組類似也有l(wèi)ength屬性, 可以和訪問數(shù)組一樣的方法來訪問, 從0開始
• getAttribute(): 獲取元素節(jié)點的屬性名稱獲取屬性的值
  • 語法: elementNode.getAttribute(name)
  • 說明
    • elementNode: 使用getElementById() getElementByTagName()等, 獲取到的元素節(jié)點的方法
    • name: 要想查詢的元素節(jié)點的屬性名稱

DOM對象常用方法