[javascript] 백분율 구하기, 프로그레스 바 구현 방법

생각보다 자주 사용하게 되는

자바스크립트로 백분율 구하기.

 

 

예를 들어 선거결과를 나타낼 때도 사용한다.

개표율, 득표율 등 퍼센트 많이 사용한다.

 

javascript 백분율 구하는 방법

const calculatePercentage = (part, whole) => {
    return (part / whole) * 100;
};

console.log(calculatePercentage(10, 100) + "%"); //10%
console.log(calculatePercentage(50, 100) + "%"); //50%
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //1.194475550578574%

기호 3번 무소속 김정현 후보의 득표율은 1.194475550578574% 다. 

아주 길고 지저분... 정확하지만 가독성이 떨어진다.

후보 세 명의 득표를 전부 더해서 계산한 것. (66583+60473+1536)

 

 

백분율 소수점 자르기

const calculatePercentage = (part, whole) => {
    return Math.ceil((part / whole) * 100); //정수로 리턴
};
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //2%


const calculatePercentage = (part, whole) => {
    return ((part / whole) * 100).toFixed(2); //소수점 두자리까지 리턴
};
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //1.19%

 

Math.ceil() (소수점 올림) -> 2% 반환

toFixed(2) (소수점 두 자리) -> 1.19%로 반환 

 

 

 

//util.js
export const calculatePercentage = (part, whole) => {
    const percentage = ((part / whole) * 100).toFixed(1);
    return percentage;
};


import { calculatePercentage } from "../util/util";
//이런식으로 로드해서 사용중

워낙 자주 사용하다보니 이렇게 util.js로 만들어놓고

땡겨서 사용하고 있다.

 

퍼센트 무지하게 많이 사용한 페이지.

우리 국회 언제 바꿀래? 청년 • 여성, 2024 총선 챌린지 선거 결과

 

 

 

프로그레스 바 구현 방법

그 외에도 프로그레스 바를 구현한다던가 scrollTop 값을 이용해서

페럴렉스 스크롤 인터랙티브를 만들 수도 있다.

 

See the Pen 프로그레스 바, 백분율 by KIHWAN CHUN (@yahao2512) on CodePen.

 

 

 

스크롤 값에 따른 프로그레스 바 구현을 해봤는데,

특별히 어려운 것은 없는데, 헷갈릴만한 부분은

const progressBar = document.querySelector(".progressBar");
const numText = progressBar.querySelector("p");

window.addEventListener("scroll", function (e) {
	const scrollTop = document.documentElement.scrollTop;
	const documentHeight = document.body.offsetHeight - window.innerHeight;
    	//문서 전체 길이에서 window 화면 높이만큼을 빼줬다.
    
	const per = Math.ceil((scrollTop / documentHeight) * 100); //정수로 100분율 구하기
    
	progressBar.style.width = `${per}%`; //바 퍼센트 넣어주기
	numText.innerText = `${per}%`; //텍스트 넣기
});

 

전체 화면 길이 (문서 길이) - 브라우저 창 크기(높이) 

이 부분일텐데, - window.innerHeight 를 빼고 

테스트해보면 차이가 느껴질 것이다.

(퍼센트가 100까지 안 나옴)

 

 

 

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] | 코딩일레븐 - 인프런

스크롤 이벤트를 이용한 인터랙티브 강의 추천