웹솔루션개발 25년 노하우! 해피CGI의 모든것

BOOTSTRAP 을 이용한 아날로그 시계를 웹 페이지에 보여주는 플로그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 특이사항은 Time Zone 셋팅이 가능 하구요. 7개의 시계 스타일을 제공 합니다. 사용법 안내 합니다. 1. 라이브러리 호출 하세요. 2. 시계가 출력될 컨테이너를 선언하세요. 3. 컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하면 아래의 이미지 처럼 출력 됩니다. ^^ 타임존 셋팅 외에는 시계의 크기 등을 변경하려면 css 를 수정해야 한다는게 안타깝네요. 제공되는 옵션은 대부분 색상에 대한 옵션입니다. 타임존 셋팅값은 혹시나 필요하실까 생각되어 첨부 합니다. (타임존이 너무 많아요 ^^ ) Europe/Andorra, Asia/Dubai, Asia/Kabu..

아날로그 시계를 웹 페이지에 보여주는 플러그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 사용법에 대해서 안내 합니다. 1. 라이브러리를 호출 하세요. 2. 시계 위치를 잡기 위해 css 를 추가해 주세요. 3. 시계를 출력할 컨테이너를 선언하세요. 4.컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하게 되면 아래의 이미지 처럼 출력 됩니다. 스크립트로 시계 함수에 전달 가능한 옵션에 대해서 설명 합니다. szie : 시계의 크기 설정 x : 시계의 x축 시작 좌표 y : 시계의 y축 시작 좌표 x, y 값 설정시 주의사항은 시계의 중심점을 기준으로 좌표를 설정해야 합니다. 즉, x값 0, y값 0 으로 설정하신 후 원하시는 좌표 값을 설정하시면 됩니다.

모바일에서 시간을 선택하는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 메모장이나 텍스트 편집기로 열어보면 위 코드를 아래 처럼 변경을 해서 저장하면, 웹브라우저로 열어보면 확인이 가능합니다. NPM을 설치가 가능하면, https://github.com/loebi-ch/jquery-clock-timepicker 위 링크를 참고하면 되겠습니다. 예제 화면에는 위 그림 처럼 시간과, 분을 입력해둔 다양한 케이스의 입력폼을 볼수 있네요. 시간이 입력된 입력폼을 클릭해보면 위 그림 처럼 아날로그 시계모양이 화면에 표시가 되고 시계에 표시되는 시간을 클릭해서 입력폼에 입력된 시간을 조절할 수가 있네요. 웹페이지에 시계를 표시하기 위한 다양한 옵션들이 제공이 되며..

Jquery 로 제작된 시계모양의 UI를 통해서 시간을 입력받기 위한 스크립트입니다. 첨부된 파일을 다운로드해서 압축을 풀어보면 index.html 파일을 웹브라우저를 이용해서 열어보면 확인이 됩니다. 열어 보면 입력박스만 있는데 입력박스를 마우스로 클릭해보면 아래 그림과 같이 시간을 선택하고 분을 선택하는 시계를 이용해서 입력박스에 시간을 입력할수 있습니다. 시계를 조절하는 몇가지 옵션이 있는데, 입력박스를 클릭했을때 시계를 이용해서 시간을 입력받도록 적용하는 방법은 https://www.jqueryscript.net/time-clock/Material-Time-Picker-Plugin-jQuery-MDTimePicker.html 위 페이지의 옵션의 이름, 설정된 값등이 나와 있습니다.

html과 css 만으로 작동되는 카운터 시계 소스입니다. 해당 사이트에서 또는 소스다운로드를 하시면 해당 소스를 다운로드 받으실 수 있습니다.