아날로그 시계넣기 플러그인 정보
아날로그 시계넣기 플러그인
관련링크
첨부파일
본문
헤더나 아웃로그인, 게시판 등에 쉽게 넣을 수 있는 아날로그시계 플러그인입니다.
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로 만들어서 사용하시면 될겁니다.
초보수준을 갓 벗어난 수준이라 부족한 점이 많습니다. 너그럽게 이해해주세요.
감사합니다.^^
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>
이렇게 사용하세요.
이것을 어디에다 넣어면 될까요 해드입니까
들레아빠님 설명쫌 주세요
tail의 <div id="aside">입니다.
<?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"); ?> 이런식으로 게시판안에 시계를 넣는 경우에 댓글작성시에 "올바른 방법으로 사용해주세요"라고 나오는 오류를 수정했습니다.
다시 다운로드해주세요^^
