WEB/javascript8 [javascript][toy]마우스 트레이서 내용 소개 이번에는 재미 삼아 마우스가 이동할 때 뒤에 문자나 그림이 따라다니는 기능을 구현해봤습니다. 단순하게 MouseTracker 객체 생성하고 해당 객체에 형식에 맞게 이미지나 글자를 push 해주면 마우스를 따라다니는 것처럼 보이게 됩니다. 구현 소스 See the Pen MouseTracer-class by kjg20260 (@kjg20260) on CodePen. 2022. 8. 10. [javascript]Date 객체 포맷 변환 Date 객체 포맷 변환 javascript에서 Date 객체를 내가 원하는 포맷/패턴으로 출력하기 위해서 만든 함수입니다. Date 객체의 prototype에 정의하여 생성되는 생성된 어느 Date 객체에서든 사용할 수 있게 하였습니다. ※ 주의 : javascript 에서는 일반적인 객체는 객체의 prototype을 상속하기 때문에 prototype의 수정은 위험할 수 있습니다. 단순하게 format으로 들어오는 문자열에서 특정 문자들을 차례대로 바꿔주는 함수이기 때문에 응용해서 수정하여 사용 가능합니다. 아래는 소스코드입니다. 소스 코드 See the Pen DateToCustomString by kjg20260 (@kjg20260) on CodePen. 2022. 4. 7. [javascript]checkbox 특정 개수 필수 선택 checkbox 특정 개수 필수 선택 input 태그 중 checkbox 타입은 한 개 이상의 선택이 필요할 때 사용합니다 프로젝트 진행중 체크박스 중 필수로 특정 개수만큼 선택해달라는 요구사항이 있었고 그로 인해 간단하게 만들었던 함수입니다. 기본 동작 기본적인 기능 은 radio 타입과 비슷하게 만들었고 그로 인해 다중 선택 가능한 radio 태그로도 생각할 수 있습니다. ※ 1개를 필수 개수로 입력 시 radio타입과 동일하게 동작 1. 특정 개수만큼 기본적으로 체크 2. 추가 선택 시 제일 처음 체크한 태그 체크해제 3. 체크 해제 방지 소스 코드 체크할 개수를 입력하고 설정버튼을 누르시면 동작합니다. See the Pen checkboxLikeRadio by kjg20260 (@kjg20260).. 2022. 4. 1. [javascript]랜덤하게 밝은 색 코드 반환하기 함수 구현 목적 여러 색을 랜덤 하게 뽑고 싶은데(차트 라인 별 색상 등) 너무 알록달록하여 밝은 색들만 랜덤하게 뽑고 싶어서 구현해 봤습니다. 구현 방법 랜덤하게 헥스 코드(#○○○○○○)로 반환하는 함수입니다. 헥스 코드는 16진수 6자리로 이루어져 있습니다. 이중 2자리씩 앞에서 부터 R(빨강색), G(녹색), B(파란색)을 나타내며 00(0)~FF(255)까지 총 256단계로 각각의 색의 강도를 나타냅니다. 해당 색은 빛의 삼원색을 서로 더하는 가산혼합으로 3가지 색이 모두 0인 경우 #000000 검정, 모두 FF 인 경우 #FFFFFF로 흰색이 됩니다. 이처럼 각 색의 값의 합이 높을 수록 밝아지므로 모든 색상 값을 반 이상으로 랜덤 하게 뽑았습니다. RGB 값이 128, 16진수로는 80 이.. 2022. 1. 26. 이전 1 2 다음