아날로그 시계넣기 플러그인 > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

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

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

첨부파일

clock.zip (3.7K) 18회 다운로드 2022-05-05 19:08:33
테스트한 버전5.5.4
호환 가능 버전5.4이상

본문

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

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로 해보았습니다.

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

1982437076_1651744447.6741.png

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

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

 

1982437076_1651744537.1579.png

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

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

 

1982437076_1651744601.171.png

위의 그림은 게시판의 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로 만들어서 사용하시면 될겁니다.

 

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

감사합니다.^^

 

 

추천
6

댓글 전체

감사 합니다.
수정한 코드입니다.

<style>
body {justify-content:center;align-items:center}
.clk {width:235px;height:235px;display:flex;justify-content:center;align-items:center}
.clk::after{content:'';position:absolute;width:12px;height:12px;background-color:red;border-radius:50%;z-index:10000}
.clk::before{content:'';position:absolute;width:18px;height:18px;background-color:#f3f6f499;border-radius:50%;z-index:10000}
.clk .hour, .clk .min, .clk .sec {position:absolute}
.clk .hour, .hour_1 {width:150px;height:150px}
.clk .min, .min_1 {width:180px;height:180px}
.clk .sec, .sec_1 {width:200px;height:200px}
.hour_1, .min_1, .sec_1 {display:flex;justify-content:center;position:absolute;border-radius:50%}
.hour_1:before {content:'';position:absolute;width:8px;height:80px;background-color:#bcd766;z-index:12;border-radius:10px 6px 0 0;box-shadow: 0 0 1px #fff2cc, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6}
.min_1:before {content:'';position:absolute;width:4px;height:90px;background:#bcd766;z-index:13;border-radius:6px 6px 0 0;box-shadow: 0 0 1px #fff2cc, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6}
.sec_1:before {content:'';position:absolute;width:2px;height:150px;background:red;z-index:14;border-radius:6px 6px 0 0;box-shadow: 0 0 1px #fff2cc, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6, 0 0 1px #f7eee6}
</style>
<style>body{margin:0;overflow:hidden}::-webkit-scrollbar-track{background-color:#fff}::-webkit-scrollbar-thumb{background:#badcff99;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#ff80ed66}::-webkit-scrollbar-thumb:active{background:#ff2525}::-webkit-scrollbar-button {display:none}</style>
<canvas id="canvas" width="235" height="235" style="position:absolute"></canvas>
    <div class="clk">
      <div class="hour">
        <div class="hour_1" id="hour_1"></div>
      </div>
      <div class="min">
        <div class="min_1" id="min_1"></div>
      </div>
      <div class="sec">
        <div class="sec_1" id="sec_1"></div>
      </div>
    </div>

<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var radius = canvas.height / 2;
	ctx.translate(radius, radius);
	radius = radius * 0.90
	drawClock();

	function drawClock() {
	  drawFace(ctx, radius);
	  drawNumbers(ctx, radius);
	}

	function drawFace(ctx, radius) {
	  ctx.fillStyle = '#bcd766';
	  ctx.fill();
	}

	function drawNumbers(ctx, radius) {
	  var ang;
	  var num;
	  ctx.font = radius*0.15 + "px arial";
	  ctx.textBaseline="middle";
	  ctx.textAlign="center";
	  for(num = 1; num < 13; num++){
		ang = num * Math.PI / 6;
		ctx.rotate(ang);
		ctx.translate(0, -radius*0.85);
		ctx.rotate(-ang);
		ctx.fillText(num.toString(), 0, 0);
		ctx.rotate(ang);
		ctx.translate(0, radius*0.85);
		ctx.rotate(-ang);
	  }
	}

	var deg = 6;
	var hour_1 = document.querySelector("#hour_1");
	var min_1 = document.querySelector("#min_1");
	var sec_1 = document.querySelector("#sec_1");

	setInterval(() => {
	var day = new Date();
	var hh = day.getHours() * 30;
	var mm = day.getMinutes() * deg;
	var ss = day.getSeconds() * deg;

	hour_1.style.transform = `rotateZ(${hh + mm / 12}deg)`;
	min_1.style.transform = `rotateZ(${mm}deg)`;
	sec_1.style.transform = `rotateZ(${ss}deg)`;
	}, 500);
</script>


들레아빠님께서 수정하신 코드가 훨씬더 좋습니다. 수정해주신 코드로 다시 적용해봐야겠습니다. 감사합니다.
네이버웨일브라우저에 나오는 시계처럼 하고싶은는데 실력이 모자라서 있는코드 그대로 카피했습니다.
<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
항상 관심을 가져주시고 격려해주셔서 고맙습니다^^

<a href="#1" onclick="window.open('<?php echo G5_PLUGIN_URL?>/click/clock.php','','width=235,height=235')"><h2 title="시계"><?php include_once(G5_PLUGIN_PATH."/click/clock.php"); ?></h2></a>

이렇게 사용하세요.
관심을 가져주시고 격려해주셔 감사드립니다
<?php  include_once(G5_PLUGIN_PATH."/clock/clock1.php"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
감사합니다. 다반향님의 격려가 힘이 됩니다.
<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
관심을 가져주시고 격려해주셔고 고맙습니다.
비타주리님의 스킨과 플러그인에 비하면 한 참 모자랍니다. 비타주리님 코드보고 많이 배우고 있습니다. 이렇게 있는 코드를 짜깁기하는 것도 재미가 있습니다.^^
<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
비타주리님이나 들레아빠님 정도면 디지털시계는 즉석에 뚝딱 코드를 만들텐데요. 이제 초보를 갓 벗어나서 디지털시계코드 찾아보고 적용해보겠습니다.
관심을 가져주시고 격려해주셔서 고맙습니다.
<?php  include_once(G5_PLUGIN_PATH."/clock/clock3.php"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
전체 429
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT