js 거품 정렬 가시 화 실현 에 대한 사고방식 분석
흐름 도
구체 적 인 분석 기본 방향: 데 이 터 를 배열 dataList [] 에 저장 하고 수요 에 따라 배열 을 조작 하 며 작업 후의 배열 을 웹 페이지 (즉 데이터 시각 화) 실현 과정
function render(){
var numList = document.getElementById("num-list");
// numList
numList.innerHTML = "" ;
for(var m = 0; m < dataList.length; m++){
numList.innerHTML += "
" + "" ;
// div nodelist
var dataDiv = numList.querySelectorAll("div");
// div
dataDiv[m].style.height = dataList[m]*5 + "px";
}
}
sort() 방법 이기 때문에 우 리 는 무 작위 로 - 1 (순서) 또는 1 (순서) 만 생 성 하면 sort 방법 은 자동 으로 배열 을 처리 할 수 있 습 니 다.function randomSort(){
return Math.random()>0.5?-1:1;
}
Math.random() 방법 을 사 용 했 습 니 다. 이 방법 은 무 작위 로 [0, 1) 범위 내의 숫자 를 생 성하 고 조금 만 변화 하면 원 하 는 [1, 100] 내의 무 작위 수 를 얻 을 수 있 습 니 다.
function randomGeneration(){
for(var x=0; x<19; x++){
dataList[x] = parseInt(Math.random()*100+1);
}
}
function sortNum(arr){
for (var i = arr.length-1; i > 0; i--) {
for(var j = 0; j < i; j++){
if (arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
// state ，state
state.push(JSON.parse(JSON.stringify(arr)));
}
}
}
}
init() 를 설정 하고 init() 에서 각 단추 에 이 벤트 를 바 인 딩 한 다음 마지막 에 init() 함 수 를 호출 하면 됩 니 다.
btn.onclick = function(){
//
}
unshift() 을 통 해방법, 데 이 터 를 배열 좌표 가 작은 쪽 (즉 앞 / 왼쪽) 에서 배열 에 삽입 한 다음 에 배열 을 페이지 에 렌 더 링 합 니 다.
inleftBtn.onclick = function(){
var data = document.getElementById("num- input").value.trim();
dataList.unshift(data);
render();
}
push() 방법 을 사용 하 는 것 과 차이 가 있 습 니 다.
outLeftBtn.onclick = function(){
var data = document.getElementById("num-input").value.trim();
dataList.shift(data);
render();
}
shift() 방법 은 배열 전방 (시각 효 과 는 왼쪽) 에서 배열 요 소 를 삭제 하 는 데 도움 을 준다. 오른쪽 에서 배열 을 삭제 하 는 방법 pop() sort.onclick = function(){
sortNum(dataList);
var int = setInterval(forSortRender, 100);
//
function forSortRender(){
var s ;
s = state.shift();
var numList = document.getElementById("num-list");
numList.innerHTML = "" ;
if (s !== undefined) {
for(var m = 0; m < s.length; m++){
numList.innerHTML += "
" + "" ;
// div nodelist
var dataDiv =
numList.querySelectorAll("div");
// div
dataDiv[m].style.height = s[m]*5 + "px";
}
}
// state ，
else{
render();
window.clearInterval(int);
}
}
}
shift()방법 은 state 의 첫 번 째 배열 을 팝 업 합 니 다. 즉, 첫 번 째 교환 후의 배열 을 하고 이 를 되 돌려 변수 s 로 저장 합 니 다. 이때 s 의 데 이 터 를 페이지 에 순서대로 렌 더 링 합 니 다. setInterval() 방법 은 100 ms 마다 이 렌 더 링 함 수 를 호출 합 니 다. 따라서 100 ms 이후 state 는 맨 앞 에 있 는 배열 을 팝 업 합 니 다. 이 배열 은 원래 의 dataList [] 입 니 다.두 번 교환 한 후의 배열 을 보 여 주 었 습 니 다. 우 리 는 시각 적 으로 데이터 바 가 이동 하고 있다 는 착각 을 가지 게 되 었 습 니 다. 이렇게 교환 횟수 의 배열 이 팝 업 된 후에 state []비어 있 으 면 s 가 값 을 찾 지 못 하면 정렬 이 완 료 된 후 페이지 가 갑자기 비어 있 을 수 있 습 니 다. 따라서 if 조건 을 설정 합 니 다. s 의 값 이 undefined 일 때 원래 렌 더 링 함수 render() 를 사용 하여 정렬 된 원 배열 dataList [] 를 렌 더 링 하고 clearInterval() 정렬 에 만 적 힌 forSortRender() 함수 호출 을 중단 합 니 다. 개선 해 야 할 부분
onclick() 을 써 야 합 니 다. addEventLister() 방법 을 사용 하면 많이 좋 을 것 같 습 니 다. demo 주소https://github.com/escawn/dailyDemo/tree/master/jsVisualSort
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
