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 > Effect' 카테고리의 다른 글
이펙트 응용편 - 슬라이더 오번째 (1) | 2022.10.21 |
---|---|
이펙트 응용편 - 서치 칠번째 (1) | 2022.10.21 |
이펙트 응용편 - 서치 오번째 (3) | 2022.09.29 |
이펙트 응용편 - 페럴럭스 육번째 (4) | 2022.09.29 |
이펙트 응용편 - 마우스 육번째 (4) | 2022.09.29 |
댓글