如何隨機選取某個元素下的子元素,并每隔一段時間進行某個動作

工作任務遇到的這個問題,雖然很簡單,但是發現很多知識點沒有掌握熟練,使得最后東查西問,浪費時間,這里留文,以待后查。

思路整理:

  • 我們需要解決兩個問題:一,隨機選取子元素;二,每隔一段時間展開某種行為。

    • 隨機:需要使用random()。

    • 原材料:

      • Math.random();
        • Math.random()函數的取值為:[0,1);
      • Math.floor();
        • Math.floor()函數是向下取整的作用。
      • children();
        • jquery中,選取父元素的所有子元素。
  • 每隔:需要使用setInterval();

    • 原材料:
      • setInterval();
        • setInterval()與setTimeOut()一樣,都是有兩個參數:函數及時間。最好采用下述方式使用這樣方便調用終止函數。

實現如下:

  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <!-- <script type="text/javascript" src="./js/index.js"></script> -->
  <script type="text/javascript">
  var childrenNode
  var over;
  function overTurn(){
    over = setInterval(turn, 3000);
  };
  function turn(){
    var num = Math.floor(Math.random()*9);
    $('.box2').eq(0).children().removeClass('animate');
    $('.box2').eq(0).children().eq(num).addClass('animate');
  };
  function stopOverTurn(){
    clearInterval(over);
  }
  overTurn();
  </script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第1章 認識JS JavaScript能做什么?1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現...
    mo默22閱讀 1,326評論 0 5
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • 第1章 系好安全帶,準備啟航 1.1讓你認識JS 1.1.1 JavaScript能做什么?增強頁面動態效果(...
    張中華閱讀 1,403評論 4 10
  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經在進谷前刷過這一套題,不過當時只...
    付林恒閱讀 16,521評論 5 28
  • 變量 JavaScript的變量為弱類型變量,可以用來保存任何類型的數據。 var 可以聲明各種類型的數據 在Ja...
    閆子揚閱讀 558評論 0 1