練習1-2:JS點擊

【範例結果】

八、點擊box 隨機顯示於頁面之間

S1:因預先求得#box的寬、高,但若為【display:none;】無法求得,改為【visibility:visible;】

    #box{
      width: 200px; height: 200px; 
      cursor: pointer;
      visibility: hidden;

      /* display: none; */                /* 刪除 */
      visibility: visible;                /* 新增 */

      position: absolute;

      /* 測試用 */
      /* background-color: #f7b44f; display: block; top: 0; left: 0; border-radius: 50%; */
    }

S2:依前步驟修改,下方僅顯示修改處

//變數宣告區
    var $createTime, $clickTime, $rangTime;
    var $winW = window.innerWidth;                  //新增
    var $winH = window.innerHeight;
    var $boxW = document.getElementById('box').offsetWidth;
    var $boxH = document.getElementById('box').offsetHeight;
    console.log($winW,$winH,$boxW,$boxH);
    makeBox();



//S1:新增Box makeBox
    function makeBox(){
      var _time = Math.ceil(Math.random()*2000);

      setTimeout(function(){

      //判斷圓形、矩形
        var $radius = (Math.random()>0.5)?radius = '50%':radius = 0 ;

      //box 隨機顯示於頁面中                                          //調整之
        var $top = Math.ceil(Math.random()*($winH-$boxH))+'px';     
        var $left =Math.ceil(Math.random()*($winW-$boxW))+'px'; 
        console.log($top,$left);


      //box sytle美化彙整         //調整之:display:none; 改為,visibility: visible
        document.getElementById('box').setAttribute('style','background-color:'+getColor()+'; visibility: visible; top:'+$top+'; left:'+$left+'; border-radius:'+$radius);

        $createTime = Date.now();
      },_time)
    } // makeBox End

說明:利用JS求得:視窗寬高、元素寬高

視窗寬高:
JavaScript Window -瀏覽器對象模型】、
Window 對象屬性-innerWidth、innerHeight(中)】、【The Window Object-innerWidth、innerHeight

元素寬高:
HTML DOM 元素對象:element.offsetWidth、element.offsetHeight(中)】、 【The HTML DOM Element Object(英)