練習1-2:JS點擊

【範例結果】

三、點擊box 隨機顯示色票

S1:運用split() 方法,拆字處理

參考連結:JavaScript split() 方法

//S2:點擊box 隨機顯示色票
    function getColor(){
      var $letters = '0123456789ABCDEF'.split('');
      console.log($letters);

    } //getColor End
    
    console.log(getColor());

S2:利用【for循環】加入【#000000】(6位編碼)色票

javascript計算:runoob連結參考連結

//S2:點擊box 隨機顯示色票
    function getColor(){
      var $letters = '0123456789ABCDEF'.split('');
      console.log($letters);

      var $color = '#';
      for(var i=0; i<6; i++){
          //color = Math.random()*16;
          //color = Math.floor(Math.random()*16);
          $color += $letters[Math.floor(Math.random()*16)];
          console.log ($color);
      }
      return $color;
    } //getColor End

    // console.log(getColor());

S3:加入至 makeBox() function 色彩顯示

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