본문 바로가기
JavaScript/Effect

이펙트 용용편 - 서치 육번째

by SyuMay 2022. 10. 21.
728x90

검색 이펙트

이번 이펙트는 정렬하는 기능을 구현했습니다.

JS코드

sort를 이용하여 정렬을 구현했습니다.

코드 보기
//반대로 정렬
function sortReverse() {
    cssProperty.reverse();
    updateList();
}
// 내림차순
function sortDescending() {
    cssProperty.sort((a, b) => b.num - a.num);
    updateList();
}
// 오름차순
function sortAscending() {
    cssProperty.sort((a, b) => a.num - b.num);
    updateList();

// 알파벳(a-z) 정렬
function sortAlphabet() {
    cssProperty.sort(function (a, b) {
        if (a.name > b.name) return 1;
        else if (a.name < b.name) return -1;
        else return 0;
    });
    updateList();
}
// 알파벳(z-a) 정렬
function sortAlphabetZ() {
    cssProperty.sort(function (a, b) {
        if (a.name < b.name) return 1;
        else if (a.name > b.name) return -1;
        else return 0;
    });
    updateList();
}
//랜덤
function shuffle(data) {
    console.log(cssProp);
    for (let i = data.length - 1; i >= 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        [data[i], data[randomIndex]] = [data[randomIndex], data[i]];
        cssList.innerHTML += data[i];
    }
}
728x90
반응형

댓글


자바스크립트 사진

JavaScript

자세히보기