JSex1:多物件點擊

【範例結果】

 

CSS美化

<style>
    .box{
        width: 50px; height: 50px;
        border: 1px solid blue;
        cursor: pointer;
        /*position: absolute;*/
    }
</style>

S1:利用 亂數新增多個 div 並 命名為 【class=”box”】

 //S1:利用 亂數新增多個 div 並 命名為 【class="box"】
     var boxLengh = Math.ceil(Math.random()*10)+3;
    for(var i=0; i<boxLengh; i++){
        var div = document.createElement('div');
        div.setAttribute('class', 'box');
        document.body.appendChild(div);
    }

S2:承續課程中JS點擊範例例中,新增Box 並 設定位置、背景色彩

//S2:設定 makeBox 位置、背景色彩
    var styleAll;            /*全域變數*/
    function makeBox(){
        var $radius = (Math.random()>0.5)?$radius='50%':$radius=0;
        var $top = Math.random();    $top =  Math.floor($top*500 )+'px';
        var $left =  Math.random();  $left =  Math.floor(Math.floor($left*800)) +'px';
        styleAll = 'background-color:'+getColor()+';top:'+$top+'; left:'+$left+';border-radius:'+$radius;
  
    }
//S2:隨機變更box色彩
    function getColor(){
        var $letters = '0123456789ABCDEF'.split('');
        //console.log($letters);

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

S3:必須利用For循環,針對多個類別元素填入相關屬性

//S3:必須利用For循環,針對多個類別元素填入相關屬性
    var boxCount = document.getElementsByClassName("box");
    for (i = 0; i < boxCount.length; i++) {
        
        makeBox();
        boxCount[i].setAttribute('style',styleAll);
        //console.log(styleAll);

    }

S4: 當Click 類別元素時,隱藏該元素並再新增一個 //新增

//S3 必須利用For循環,針對多個類別元素填入相關屬性
    var boxCount = document.getElementsByClassName("box");
    for (i = 0; i < boxCount.length; i++) {
        
        makeBox();
        boxCount[i].setAttribute('style',styleAll);
        //console.log(styleAll);

        //S4 當Click 類別元素時,隱藏該元素並再新增一個       //新增
        boxCount[i].onclick = function(){
            this.style.display = 'none';
            makeBox();
            this.setAttribute('style',styleAll);
        }
    }

 

參考連結:【HTML DOM getElementsByClassName() Method】、【HTML DOM querySelectorAll() Method

參考說明:【連結1(push)】、【Creating Elements(JS+JQ)】、【JS實現點擊隨機變色