clock (다기능) > 그누보드5 팁자료실

22.07.06 23:15:10

공개 감사합니다.

22.07.07 07:59:59

@호텔천사

시계클릭:팝업시계
시계더블클릭:게시판이동
계시판날짜클릭:년월일시입력(카운트다운)
계시판날짜더블클릭:시간입력(매일반복)
제목을 입력하거나 내용만 입력하여도, 내용이 제목으로됩니다.

소시 자기소개 아이디로 검색 전체게시물 회원게시물

22.07.07 17:10:41 모바일

감사합니다 훌륭합니다

22.07.07 19:32:41

@소시 댓글 감사합니다.

휴매니아 자기소개 아이디로 검색 전체게시물 회원게시물

22.07.07 19:17:34

너무멋지네요~~
아날로그 뿐만 아니라 디지탈로 표시도 되니까 사이트 어디든 붙혀놔도 어울릴 것 같습니다.
위의 내용은 일정관리로도 사용이 가능한건가요?

22.07.07 19:41:45

카운트다운 5개
<?php for($i=count(array_filter($tTime))-5;$i<count(array_filter($tTime));$i++)if(strlen($tTime[$i])>5){ ?>
반복 5개
<?php for($i=count(array_filter($tTime))-5;$i<count(array_filter($tTime));$i++)if(strlen($tTime[$i])<10){ ?>
위 구문으로 5개씩 제한을 조절하시면 갯 수를 조정할 수 있지만 일정관리 까진 안 될 거 같습니다.
일정관리는 schedule을 사용합니다.
시계 배경은
$(document).ready(function(){
var numberOfImages=15;
var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
var imgPath=('<?php echo G5_THEME_URL?>/lib/cimg/cimg_'+imageNum+'.png');

$('.clk').css('background-image', ('url("'+imgPath+'")'));
});
에 의하여 cimg_1.png ~ cimg_15.png까지 입니다.
좋은 배경으로 바꾸어 사용 하세요.

휴매니아 자기소개 아이디로 검색 전체게시물 회원게시물

22.07.07 20:18:13

@들레아빠 감사합니다.^^

22.07.07 19:48:07

제일 중요한 내용을 빠트렸습니다.
tail.php에
<div id="aside">바로 밑에 넣고 사용하시면 됩니다.


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

비타주리 자기소개 아이디로 검색 전체게시물 회원게시물

22.07.07 21:18:32

들레아빠님 유용한 자료 공유 감사합니다.

22.07.08 07:25:56 모바일

@비타주리 @비타주리 댓글 감사합니다. @비타주리님의 코드가 사용되었습니다. 먼저 공개하여 주셔서 가능하였습니다. 제가 항상 감사히 생각합니다.

숙향 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

22.08.14 19:35:19

click.zip 이파일은 어느곳에 넣어야 하는지요
초보자 입니다.잘 부탁드릴께요

22.08.15 08:48:00

@숙향 tail.php에
<div id="aside">바로 밑에 넣고 사용하시면 됩니다.
<?php include_once(G5_THEME_LIB_PATH."/clock.php"); ?>

숙향 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

22.08.15 09:57:25

<?php include_once(G5_THEME_LIB_PATH."/clock.php"); ?> 이것만 넣어면 되는가요
한번 해보겠읍니다
둘레아빠님 감사합니다.안되면 다시 질문 드리겠읍니다
감사합니다.즐거운 하루 되세요

아하 아미나는 안되는지요

22.08.16 08:46:41

@숙향 숙향님 아미나에서는 해보지 않았습니다.
꼭 적용 하려면 위치 및 코드 수정이 필요 할 것 같습니다.

숙향 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

22.08.16 10:37:31

Warning: include_once(/host/home1/selfdaet24/html/theme/darkmode/lib/clock.php): failed to open stream: No such file or directory in /host/home1/selfdaet24/html/theme/darkmode/tail.php on line 17

Warning: include_once(): Failed opening '/host/home1/selfdaet24/html/theme/darkmode/lib/clock.php' for inclusion (include_path='.:/usr/share/pear:/usr/share/php') in /host/home1/selfdaet24/html/theme/darkmode/tail.php on line 17
이런 애러는 어떻게해요 살펴주세요

22.08.16 12:35:29

@숙향 시계만 넣기 : cimg를 tema/basic/widget/basic-outlogin/폴더에 압축해제후
widget.php의 첫 ?>바로 다음에 아래 내용을 넣으세요.


<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="clkn">
	<div id="canb">
	<canvas id="canv" class="dpg" width="235" height="235" title="아날로그/디지털 시계"></canvas>
    <div class="win_entry clk clkn" title="아날로그/디지털 시계">
      <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>
	</div>

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

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

	function drawFace(ctx, radius) {
	  var grad;
	  ctx.beginPath();
	  ctx.arc(-0, -0, radius, 0, 2*Math.PI);
	  ctx.fillStyle = 'transparent';
	  ctx.fill();
	  grad = ctx.createRadialGradient(2,2,radius*0.95, 2,2,radius*1.00);
	  grad.addColorStop(0, '#bcd76600');
	  grad.addColorStop(0.5, '#ffffff00');
	  grad.addColorStop(1, '#bcd76600');
	  ctx.strokeStyle = grad;
	  ctx.lineWidth = radius*0.1;
	  ctx.stroke();
	  ctx.beginPath();
	  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
	  ctx.fillStyle = '#bcd76600';
	  ctx.fill();
	}

	function drawNumbers(ctx, radius) {
	  var ang;
	  var num;
	  ctx.font = radius*0.14 + "px arial";
	  ctx.textBaseline="middle";
	  ctx.textAlign="center";
	  ctx.fillStyle = '#ccee7700';
	  for(num = 1; num < 13; num++){
		ang = num * Math.PI / 6;
		ctx.rotate(ang);
		ctx.translate(0, -radius*0.72);
		ctx.rotate(-ang);
		ctx.fillText(num.toString(), -0, -0);
		ctx.rotate(ang);
		ctx.translate(0, radius*0.72);
		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);

weekKr = "일월화수목금토";
document.write("<table id=todayTable class=clkn title='디지털 시계'><tr><td id=todayHead></td></tr><tr><td id=todayTail></td></tr></table>");
function todayMode() {
    todayTime = new Date();
    todayHead.innerText = String(todayTime).split(" ")[4];
    currentYear = todayTime.getFullYear() + ".";
    currentMonth = todayTime.getMonth() + 1 + ".";
    currentDay = todayTime.getDate() + " ";
    currentWeek = "<span>" + weekKr[todayTime.getDay()] + "</span>";
    todayTail.innerHTML = currentMonth + currentDay + currentWeek;
}
todayMode();
setInterval(todayMode, 500);

$(document).ready(function(){
    var numberOfImages=15;
    var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
    var imgPath=('<?php echo $widget_url?>/cimg/cimg_'+imageNum+'.png');

    $('.clk').css('background-image', ('url("'+imgPath+'")'));
});

document.write("<div onclick='doClick()'></div></div><p id=clockl class='tog' title='Clock On'>⌚</p>");

//	$( ".clkn" ).fadeToggle();
clockl.onmousedown = function() {
	$( ".clkn" ).fadeToggle();
	if (this.innerHTML == "⌚") {
		this.innerHTML = "<lii title='Clock Close'>☉</lii>";
	} else {
		this.innerHTML = "⌚";
	}
}
</script>

@숙향 시계만 넣기 : cimg를 tema/basic/widget/basic-outlogin/폴더에 압축해제후
widget.php의 첫 ?>바로 다음에 아래 내용을 넣으세요.
[code]
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="clkn">
	<div id="canb">
	<canvas id="canv" class="dpg" width="235" height="235" title="아날로그/디지털 시계"></canvas>
    <div class="win_entry clk clkn" title="아날로그/디지털 시계">
      <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>
	</div>

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

function drawFace(ctx, radius) {
	  var grad;
	  ctx.beginPath();
	  ctx.arc(-0, -0, radius, 0, 2*Math.PI);
	  ctx.fillStyle = 'transparent';
	  ctx.fill();
	  grad = ctx.createRadialGradient(2,2,radius*0.95, 2,2,radius*1.00);
	  grad.addColorStop(0, '#bcd76600');
	  grad.addColorStop(0.5, '#ffffff00');
	  grad.addColorStop(1, '#bcd76600');
	  ctx.strokeStyle = grad;
	  ctx.lineWidth = radius*0.1;
	  ctx.stroke();
	  ctx.beginPath();
	  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
	  ctx.fillStyle = '#bcd76600';
	  ctx.fill();
	}

function drawNumbers(ctx, radius) {
	  var ang;
	  var num;
	  ctx.font = radius*0.14 + "px arial";
	  ctx.textBaseline="middle";
	  ctx.textAlign="center";
	  ctx.fillStyle = '#ccee7700';
	  for(num = 1; num < 13; num++){
		ang = num * Math.PI / 6;
		ctx.rotate(ang);
		ctx.translate(0, -radius*0.72);
		ctx.rotate(-ang);
		ctx.fillText(num.toString(), -0, -0);
		ctx.rotate(ang);
		ctx.translate(0, radius*0.72);
		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);

weekKr = "일월화수목금토";
document.write("<table id=todayTable class=clkn title='디지털 시계'><tr><td id=todayHead></td></tr><tr><td id=todayTail></td></tr></table>");
function todayMode() {
    todayTime = new Date();
    todayHead.innerText = String(todayTime).split(" ")[4];
    currentYear = todayTime.getFullYear() + ".";
    currentMonth = todayTime.getMonth() + 1 + ".";
    currentDay = todayTime.getDate() + " ";
    currentWeek = "<span>" + weekKr[todayTime.getDay()] + "</span>";
    todayTail.innerHTML = currentMonth + currentDay + currentWeek;
}
todayMode();
setInterval(todayMode, 500);

$(document).ready(function(){
    var numberOfImages=15;
    var imageNum = Math.round(Math.random()*(numberOfImages-1))+1;
    var imgPath=('<?php echo $widget_url?>/cimg/cimg_'+imageNum+'.png');

$('.clk').css('background-image', ('url("'+imgPath+'")'));
});

document.write("<div onclick='doClick()'></div></div><p id=clockl class='tog' title='Clock On'>⌚</p>");

//	$( ".clkn" ).fadeToggle();
clockl.onmousedown = function() {
	$( ".clkn" ).fadeToggle();
	if (this.innerHTML == "⌚") {
		this.innerHTML = "<lii title='Clock Close'>☉</lii>";
	} else {
		this.innerHTML = "⌚";
	}
}
</script>
[/code]

22.08.16 12:41:29

@숙향 /theme/darkmode/lib/clock.php <- 여기에 있습니까?

22.08.16 12:54:31

@숙향 /theme/darkmode/lib/_common.php가 없으면 만들어 주세요.
<?php include_once('../../../common.php');