군 계산기 만들기

TStory에 군 계산기 만들기 Ver.1

환경
Tstory 게시글( HTML모드)
사용한 언어
JavaScript
사용한 라이브러리
Moment.js
참고한 사이트
W3Schools

1. Moment.js에서 사용할 라이브러리를 다운받아옵니다.
2. 티스토리 스킨 편집에서 업로드해줍니다.

업로드 하는 방법

html편집에 들어가서

파일 업로드에 다운받은 Moment.js를 올려줍니다

그리고 글 쓰기에 html버튼을 눌러줍니다

Ver.1로 만들고 싶었던 제 군 생활 퍼센트는
그저 단순히 제 군생활 퍼센트만 보여주기만 하면 됩니다.
그 다음 추후 수정할 것에는 남은 일수 + 다른 사람 군생활 계산

<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<div id="myProgress">
  <div id="myBar"></div>
</div>


<script src="moment.js"></script>
<script>

var now = moment(); // Moment에서 오늘 날짜를 받습니다.
var endDate = moment("2019-10-31T23:35:01");   //자신의 전역일
var resultDate = endDate.diff(now, 'days', true);//차이 구하기`enter code here`
resultDate = Math.floor(resultDate);

var workedDays = 667-resultDate;//지금까지한 복무일수

var result = workedDays/667; // 현재 남은 퍼센트
result = result*100; // 소수점으로 나오닌 100을 곱해주고
result = result.toFixed(2); // toFixed함수로 소수점을 버려준다

var elem = document.getElementById("myBar"); // document의 progress Bar를 지정해준다. elem 변수에 
var width = result; // Progress Bar 채울 내 복무 너비
elem.style.width = width + '%';  // 지정해주기
elem.innerHTML = width * 1  + '%'; // Bar 안에 보여줄 글씨

</script>