개발/HTML, Javascript, CSS5 [Javascript] Date() 자바스크립트의 Date() 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타낸다. Date() 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담고 있다. 아래는 Date()를 활용할때 가장 많이 사용하는 방법을 정리해 보았다. 생성자 Date() 객체는 클래스 이기 때문에 생성자 호출을 통해 객체를 생성한다. 이때 생성자에 어떠한 인자를 넣느냐에 따라 객체를 통해 얻어 낼 수 있는 시간 데이터가 달라진다. new Date(); new Date(value); new Date(dateString); new Date(year, monthIndex); new Date(year, monthIndex, day); new Date(year, monthIn.. 2023. 12. 8. [Javascript] 3항 연산자 활용 기준 관리 화면에 아래와 같이 시작시간과 종료시간을 추가해 달라는 요청을 받았다. 단순히 위 그림과 같이 '시작시간'과 '종료시간'을 입력(선택) 받아 저장하면 좋겠지만 입력받은 값이 제대로 되어 있는지 체크까지 해줘야 하는게 우리의 일이다. 오늘은 그 과정을 풀이해보려고 한다. 특정 날짜를 지정 위 그림을 보면 알겠지만 특정 날짜를 입력 받는 것은 아니고, 단순히 '당일'/'익일'만 선택 할 수 있도록 되어 있다. 시간과 날짜를 계산하기 위해서는 임의라도 날짜가 필요하다. 따라서 날짜는 아래와 같이 고정 하였다. 당일 : 1970.01.01 익일 : 1970.01.02 이미 눈치챈 사람도 있을 것이다. 1970년 01월 01일은 timestamp의 시작 날짜이다. 이제 위에 식을 코드로 짜보자 let .. 2023. 12. 8. [Javascript] GPS 좌표상 거리 계산 방법 function calcDistance(locLat, locLng, myLat, myLng){ const earth_r = 6371; //지구 반지름(km) const dLat = deg2Rad(myLat - locLat); const dLng = def2Rad(myLng - locLng); const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2Rad(LocLat)) * Math.cos(deg2Rad(myLat)) * Math.sin(dLng/2) * Math.sin(dLng/2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); const distance = earth_r * c; return d.. 2023. 12. 1. [Javascript] 8자리 날짜형식 문자열에 포멧 적용하기 서버나 다른 화면으로 부터 '20231121' 과 같은 8자리 문자열을 리턴 받았다. 이 데이터를 화면에 그대로 보여주기 보다는 '년.월.일' 혹은 '년/월/일' 하는 형식으로 포멧을 적용해 보여주는 것이 사용자 경험에 중요한 역활을 할 것이다. 이런 데이터가 수시로 넘어 올 것이기 때문에 아래와 같이 함수를 만들었다. function formatByYmd(ymd){ return ymd.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$'); } 이제 서버에서 '20231121' 과 같은 데이터가 넘어오면 이 함수를 통해 '2023.11.21'로 바뀌게 될 것이다. 만약 구분자를 '/' 나 '-' 같은 형식으로 변경하고 싶다면 replace의 두 번째 인자인 '$1.$2.$3'을 .. 2023. 11. 21. [HTML,CSS] div안에 스크롤바를 달고 이벤트 버튼 넣기 이번 포스팅에서는 몇 일동안 골치를 아프게 했던 것에대해 정리해 보려고 합니다. div 안에 스크롤 바를 설치하고,div 영역 안쪽... 우측 하단에 위치가 고정된 버튼(floating button : 플로팅버튼)을 만드는 것입니다. 우선가장 먼저 해야 할 것은 div 안에 스크롤 바를 만들어 내는 것이 겠지요 스크롤 바를 만드는것은 생각보다 간단합니다.CSS 속성중 overflow 속성을 주면 됩니다. 이렇게 하면 스크롤이 생성됩니다.위 같은 경우는 가로,세로 모든 스크롤이 생기는 경우이지만경우에 따라서 세로만 만들거나, 가로만 만들어야 할 필요도 있습니다.그럴때는 overflow-x 나 overflow-y 속성을 이용합니다. 그럼 이제 드디어 버튼을 div 영역 안쪽에 달아볼 차례 입니다. (이 부분.. 2018. 10. 23. 이전 1 다음
