(21.04.13) 도넛 만들기

*도넛 박스에  5,3짜리 박스를 활용해서 최소한에 박스를 사용하여 박스 구하기 

let index = 21;
        let box = 0;
        function boxing() {
            if (index % 5 == 0) {
                box = index / 5;
                return;
            } else {
                if (index <= 0) {
                    box = -1;
                    return;
                }
                index -= 3;
                box++;
                if (index % 5 == 0) {

                    box += index / 5; //box= box _index/5
                    return;
                }
            }
            boxing();
        }
        boxing();
        console.log(box);

forEach 익명 함수 활용 

 window.addEventListener('DOMContentLoaded',init);
    function init(){
        let gnb = document.querySelectorAll('.gnb>li');
        gnb.forEach( function (ele,index){
            ele.innerHTML='aaa_'+index;
        });
    }

함수 활용

 function hello(){
        console.log('hellow world');
        return 1 ;
    }
  
    let hello2 = function(){
        /*code  block*/
        console.log('hellow world');
    }
    hello2();
    //익명함수 => 화살표 함수
    //(인자값)
    let hello3 = (num) => {console.log('hellow world'+num)};
    hello3(3);

    let hello4 = num => {
        console.log('hellow'+ num);
    }
    //인자값이 하나일 경우에만 ()를 생략가능
    hello4();

setTimeout(); 한번만 실행하고 끝난다.

하지만 재귀 함수를 사용하면 된다 박스를 활용해서 최소한에 박스를 사용하여 박스 구하기 

 

let index = 21;

        let box = 0;

        function boxing() {

            if (index % 5 == 0) {

                box = index / 5;

                return;

            } else {

                if (index <= 0) {

                    box = -1;

                    return;

                }

                index -= 3;

                box++;

                if (index % 5 == 0) {

 

                    box += index / 5; //box= box _index/5

                    return;

                }

            }

            boxing();

        }

        boxing();

        console.log(box);

forEach 익명 함수 활용 

 

 window.addEventListener('DOMContentLoaded', init);

    function init(){

        let gnb = document.querySelectorAll('.gnb>li');

        gnb.forEach( function (ele,index){

            ele.innerHTML='aaa_'+index;

        });

    }

 

함수활용

 

 function hello(){

        console.log('hellow world');

        return 1 ;

    }

  

    let hello2 = function(){

        /*code block*/

        console.log('hellow world');

    }

    hello2();

    //익명함수 => 화살표 함수

    //(인자값)

    let hello3 = (num) => {console.log('hellow world'+num)};

    hello3(3);

 

    let hello4 = num => {

        console.log('hellow'+ num);

    }

    //인자값이 하나일 경우에만 ()를 생략가능

    hello4();

setTimeout(); 한번 만 실행하고 끝난다.

 

하지만 재귀함수를 사용하면 된다

 

반복문 돌아가긴하지만 슬라이드를 주는데는 문제가 있으므로 수정해야한다.

let index = 0;
function hero(){
 let ul=document.querySelectorAll('#header_hero_backgrounds>ul');
 
 if(index == ul.length) index=0;
 let beNum = (index==0) ? (ul.length-1) : index-1;
 ul.item(index).setAttribute('class','hero on');
 ul.item(beNum).setAttribute('class','hero out');


// ul.forEach((ele,i)=>{
//     if(i == index){
//         ele.setAttribute('class', 'hero on');
//     }else if(beNum==i){
//         ele.setAttribute('class', 'hero out');
//     }else{
//         ele.setAttribute('class', 'hero');
//     }
// });
index++;
setTimeout(hero,3000);
}
hero();

 

let index = 0;
function hero(){
 let ul=document.querySelectorAll('#header_hero_backgrounds>ul');
 
 if(index == ul.length) index=0;
 let beNum = (index==0) ? (ul.length-1) : index-1;
 ul.item(index).setAttribute('class','hero on');
 ul.item(beNum).setAttribute('class','hero out');

 newUl = Object.values(ul);
 newUl[index] = undefined;
 newUl[beNum] = undefined;
 newUl.forEach(ele=>{
     if(ele != undefined){
         ele.setAttribute('class','hero');
     }
 });
 index++;
 setTimeout(hero,3000);
 }
 hero()

 

let index = 0;
function hero(){
 let ul=document.querySelectorAll('#header_hero_backgrounds>ul');
 
 if(index == ul.length) index=0;
 let beNum = (index==0) ? (ul.length-1) : index-1;
 ul.item(index).setAttribute('class','hero on');
 ul.item(beNum).setAttribute('class','hero out');

ul.forEach((ele,i)=>{
    if(i!=index && i!=beNum){
        ele.setAttribute('class','hero');
    }
});

 index++;
 setTimeout(hero,3000);
 }
 hero()

*슬라이드를 3개 만든다고 가정했을때 하나씩 3개의 함수를 만들기 보다 함수안에 함수를 선언하여  

겹치는 부분을 줄여서 활용할수 있다. 

함수를 3번 호출하면 우리 눈에는 1개가 실행되는 것처럼 보이지만 컴퓨터에서는 각각 3개에 함수를 실행하게된다.

  function banner(){
            let index = 0;
            function slider(){
                if(index == 10) index = 0;
                index++;
                console.log(index);
                setTimeout(slider,1000);
            }

            slider();
        }

        banner();
        banner();
        banner();