練習1-2:JS點擊

【範例結果】

一、前置作業

  <style>
    #box{
      width: 200px; height: 200px;
      cursor: pointer;
      background-color: #4ff1f7;
    }
  </style>

<body>
    時間:<span id="time"></span>
    <div id="box"></div>
</body>

二、【box】反覆點擊

S1:點擊【box】消失

    document.getElementById('box').onclick = function(){
//        document.getElementById('box').style.display='none';
      this.style.display= 'none';
    }

S2:利用【setTimeout】計時器,並結合【Math.random】非固定頻率顯示【box】

note:若sytle #box{display: none;}  利用JS顯示開啟畫面

    makeBox();

    document.getElementById('box').onclick = function(){
//    document.getElementById('box').style.display='none';
      this.style.display='none';

      makeBox();              /* 新增 */
    }

//S1:新增Box makeBox
    function makeBox(){
      var _time = Math.ceil(Math.random()*5000);
      // console.log( Math.ceil(_time),_time);
      setTimeout(function(){
        document.getElementById('box').style.display = 'block';        
      },_time)
    } // makeBox End

S3:運用【Date.now】方法,在頁面新增點擊反應秒數

note:在HTML結構中,加入【時間:<span id=”time”></span>】

//變數宣告區
    var $createTime, $clickTime, $rangTime;                         /*新增*/

    makeBox();

    document.getElementById('box').onclick = function(){
//        document.getElementById('box').style.display='none';
      this.style.display= 'none';

      $clickTime= Date.now();                                      /*新增*/
      $rangTime = ($clickTime - $createTime)/1000;
      document.getElementById('time').innerHTML = $rangTime + '秒';

      makeBox();
    }


//S1:新增Box makeBox
    function makeBox(){
      var _time = Math.ceil(Math.random()*2000);
      // console.log( Math.ceil(_time),_time);
      setTimeout(function(){
        document.getElementById('box').style.display = 'block';
        $createTime = Date.now();                                  /*新增*/  
      },_time)
    } // makeBox End

參考連結:HTML DOM Document 對象HTML DOM innerHTML 屬性

延伸說明:

(1) HTML DOM querySelector() 方法 介紹

  <!-- 時間顯示,html結構變更 -->
    <p id="time">時間:<span></span>秒</p>

  <!-- script 時間顯示,改用 【querySelector()】 方法 -->
    <script>

        // document.getElementById('time').innerHTML = $rangTime + '秒';

        document.querySelector('#time span').innerHTML = $rangTime ;

    </script>

參考連結:HTML DOM querySelector() 方法HTML DOM Document 對象

(2) HTML DOM querySelectorAll() 方法

  <!-- HTML 結構 -->
  <h1 class="titleClass"><span>aaa</span></h1>
  <h1 class="titleClass"><span>bbb</span></h1>

  <!-- script寫入 -->
  <script>
    var el = document.querySelectorAll('.titleClass span');

    //S1:確認 el 結構
    console.log(el);

    //S2:逐一輸出,並了解textContent 與innerHTML 差異
    el[0].textContent = '123';
    el[1].innerHTML ='<a href="#">456</a>';

    //S3:練習利用For迴圈,加入元素內容
    for(var i=0; i<el.length ; i++){
      el[i].textContent = i + '.list';
    }
  </script>

參考連結:HTML DOM querySelectorAll() 方法(EN)

HTML DOM innerHTML 屬性HTML DOM textContent 屬性