練習1-2:JS點擊

【範例結果】

七、利用【setAttribute】將style彙整

S1:#box 利用【setAttribute】將style彙整

原始:

//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

S2:利用CSS測試、組合語法

  <style>
    #box{
      width: 200px; height: 200px; 
      cursor: pointer;
      display: none;
      position: absolute;

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

S3:JS微調:【參考連結(中)】、 【參考連結(英)

//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';

      //box sytle美化彙整
        document.getElementById('box').setAttribute('style','background-color:'+getColor()+'; display:block; top:'+$top+'; left:'+$left+'; border-radius: 50%;');

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

S4:S1的步驟,發現【圓形】未顯示

原始:

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

結果:

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


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

【參考連結】