練習1-2:JS點擊

【範例結果】

四、點擊box 隨機顯示圓形或矩形

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

      setTimeout(function(){

      //判斷圓形、矩形                              /*新增IF*/
        if(Math.random()>0.5){                                              
          document.getElementById('box').style.borderRadius = '50%';
        }else{
            document.getElementById('box').style.borderRadius = '0';
        }

        document.getElementById('box').style.backgroundColor = getColor();
        document.getElementById('box').style.display = 'block';
        $createTime = Date.now();
      },_time)
    } // makeBox End

五、點擊box 隨機顯示於頁面(W:800px,H:500px)之間

※運用定位設定,記得新增 #box{position: absolute;}

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

      setTimeout(function(){

      //判斷圓形、矩形
        if(Math.random()>0.5){                                              
          document.getElementById('box').style.borderRadius = '50%';
        }else{
            document.getElementById('box').style.borderRadius = '0';
        }

      //box 隨機顯示於頁面中
        var $top = Math.random()*500 +'px';                  /*新增*/
        var $left = Math.random()*800 +'px';
        document.getElementById('box').style.top = $top ;
        document.getElementById('box').style.left = $left;

        document.getElementById('box').style.backgroundColor = getColor(); 
        document.getElementById('box').style.display = 'block';
        $createTime = Date.now();
      },_time)
    } // makeBox End