아날로그 시계넣기 플러그인

헤더나 아웃로그인, 게시판 등에 쉽게 넣을 수 있는 아날로그시계 플러그인입니다.

pc전용이며 모바일에는 아날로그시계가 어울리지 않을 듯합니다.

시계의 원 소스는 https://www.w3schools.com/graphics/canvas_clock.asp 입니다.

다운로드 받은 폴더를 압축풀면 clock 폴더안에 clock1.php, clock2.php, clock3.php 3개의 파일이 나옵니다.

같은 코드를 겹치지 않게 하기위해서 canvas id, 그리고 각각의 변수의 이름을 다르게 만들었습니다.

각 시계마다 아이디, 변수이름이 달리 했기때문에 한 화면에 3개의 시계까지 표시가 가능합니다.

필요한 곳에 시계를 골라서 적용하시면 되리라 생각이 됩니다.

적용하는 방법은 clock 폴더를 서버의 plugin 폴더에 업로드 한후에 

시계를 나타내고자 하는 곳에 아래 코드를 넣어줍니다.

<?php  include_once(G5_PLUGIN_PATH."/clock/clock1.php"); ?> or

<?php  include_once(G5_PLUGIN_PATH."/clock/clock2.php"); ?> or

<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?>

clock1.php는 캔버스의 크기를 header.php에 넣기쉽게 width: 140, height: 140, 시계배경색을 그부보드 헤더배경색과 동일하게 style="background-color:#212020;으로 하였습니다.

clock2.php는 캔버스의 크기를 outlogin 안에에 넣기쉽게 width: 235, height: 235로  하였습니다.

clock3.php는 시계내부색을 yellow로 해보았습니다.

필요에 따라 크기와 색상을 변경하시면 됩니다.

<?php  include_once(G5_PLUGIN_PATH."/clock/clock1.php"); ?>

위의 그림은 head.php안에 넣은 것입니다.

위의 그림은 tail.php의 아웃로그인 아래에 시계를 넣은 것입니다.

<?php  include_once(G5_PLUGIN_PATH."/clock/clock1.php"); ?>

위의 그림은 게시판의 view.skin.php 안에 시계를 넣은 것입니다.

<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?>

처음에 올린 소스를 게시판 view.skin.php안에 넣는 경우에 댓글을 작성하면 "올바른 방법으로 이용해주세요"라는 alert와 함께 댓글이 입력한되는 문제가 있어서 code를 수정했습니다.

한화면에 시계를 여러개 넣을 경우에 3개이상이면 아이디가 겹쳐져서 3개 만 나올겁니다. 그럴경우에 clock1.php의 소스중에 canvas id와 각 각변수의 아이디를 다른 것으로 변경해서 clock4.php로 만들어서 사용하시면 될겁니다.

초보수준을 갓 벗어난 수준이라  부족한 점이 많습니다. 너그럽게 이해해주세요.

감사합니다.^^