배열을 통한 디스플레이
블로그에 달았던 '타이머 위젯(현재 시각, 페이지에 들어온 시각, 페이지에 머문 시간 등등)'에서 '페이지에 머문 시간' 부문이 아무래 해봐도 잘 안됐습니다.
그 원리는 간단한 거였어요. '현재 시각'에서 '페이지에 들어온 시각'을 빼 버리면 '페이지에 머문 시간'이 나올 거 아녔겠어요.
그러나 블로그에서 이 방식을 허용하지 않았기에 '현재 시각'과 '페이지에 들어온 시각'을 제외한 나머지는 들어오자마자 '초시계 작동하는 방식의 타이머'를 만들었는데 그게 내 컴퓨터에서의 오프라인에서나 잘 통했지, 블로그에 접목해서는 시간이 지날수록 그 시차가 벌어지는 겁니다.
이것 아무리 해도 안 됐었기에 차라리 살면서 가슴에 담았던 여인들 이름 몇이 '아이디를 품은 한 라인(P 또는 DIV)에 번갈아 가며 보이게끔' 위젯을 새로 짰답니다.
물론, 이전의 시간 체크도 아이디를 품은 라인에 나오게끔 설정한 상태에서 말입니다.
- <P id="We1"> -
앞쪽의 타이머 둘은 남긴 채로 말입니다.
그런데 이것 이름 몇이 나오게끔 했던 부분 이름이 복수였기에 '배열(Array)'을 썼으며 이전에 타이머에 집착한 나머지 자바스크립트에서 일반적인 '시계 함수'를 써서 라인 태그(P)에 뿌렸거든요.
이것이 성공하자 엉뚱한 욕심이 생겼답니다.
제가 '이전에 알았던 이름 대다수를 이런 식으로 뿌리고 싶은 욕심‘이 말이에요.
그 이름이 백여 명밖에 안 됐지만, 블로그에 올렸던 위젯과 같은 방식으로는 잘 안되는 겁니다.
문제는 초시계에 있었습니다.
1분을 다 써봐야 60초밖에 안 되는데 그 안에 백여 명을 다 넣으려니까 몇 번을 돌려도 그 숫자를 다 채우지 못하데요.
그리하여 고심 끝에 결론 내기를 이것 초시계 타이머를 하나가 아니라 셋을 두는 방식으로 변경해서 그 모두를 각각의 라인(세 라인)에 뿌리게끔 했었답니다.
그렇게 하여 성공하긴 했지만, 소스도 길어지고 아무래도 라인 셋이나 됐기에 후련하질 않더라고요.
곰곰이 생각했지요.
'이것 초시계 없이도 가능한 방법으로 뭐가 없을까???'
'아 맞아 그래! 그림이 있었지!!!'
실은 제게 아이디를 담은 라인에 그림 여러 개를 내보내는 소스가 있었거든요.
그리하여 그것 그림 부분을 글자로 개조했답니다.
그러고는 그림이 들어갔던 배열에도 아는 분의 이름으로 바꿔치기했지요.
이건 이전의 위젯과는 달리 초시계 타이머가 들어가지 않은 대신에 '타임아웃(TimeOut)' 설정하는 부분에 약간의 변화가 있더라고요.
라인에 내보낼 이름 숫자가 백여 개뿐이라서 그림에서처럼 마우스 클릭으로 몇 단계 앞으로 보내거나 몇 단계 뒤로 보내는 태그는 빼냈답니다.
그리고 이름만으로는 뭔가가 부족한 듯했기에 그 아래로 이것이 배열의 몇 번짼지를 알리는 순번을 넣기로 했어요.
그러면서 '숫자 앞에 0(영, 제로) 채우는 방법'도 이번에 새롭게 알아낸 방법을 써먹었답니다.
아무튼, 기분이 좋습니다.
이번에 짰던 웹 문서 소스 중 중요한 부위를 아래에 넣을 겁니다.
다만, 배열의 이름 부분은 그대로 쓸 수 없기에 약간 바꿔서 일부를 넣겠습니다.
아래 점선 안으로는 게시판에 난생처음 글이 써진 대로 보인다는 ‘PRE’ 태그를 써볼 건데 잘되려나 모르겠습니다.
--------------------------------------------------------------------------------
<HTML><HEAD>
<TITLE>배열을 통한 디스플레이</TITLE>
<STYLE>
BODY{background-image:url('./Gif-03.gif');margin:15px 0 25px 0;}
</STYLE></HEAD>
<BODY oncontextmenu='location.reload();return false;'>
<DIV align='center'>
<P style="Padding:250px 0 0 0;"><SPAN id="Tx" style="font-family:궁서;color:#000;background-image:url('./Back-13.jpg');cursor:default;font-size:100pt;font-weight:bold;padding:25px 50px 15px 50px;" onmouseOver="Stop()" onmouseOut="StAni()">시작합니다 ♣</SPAN></P>
<P style="Padding:0;"><SPAN id="Sx" style="font-family:바탕;color:white;background:black;cursor:default;font-size:12pt;font-weight:bold;padding:4px 15px 3px 15px;"></SPAN></P>
<Script language="javaScript" type="text/JavaScript">
var obTimeOut; // clearTimeout() 함수를 이용하여 Timeout을 취소하기 위해 사용됨
var UA=new Array();
UA[1]="착실 강나루";
UA[2]="착실 고구마";
UA[3]="착실 김가루";
UA[4]="착실 김치전";
UA[5]="착실 김서방";
UA[6]="착실 김나네";
UA[7]="착실 김말이";
.
.
- 이곳 배열에 넣은 이름은 제가 썼던 실명이 아니라 조작한 이름입니다. -
.
.
UA[150]="맑음 이제는";
UA[151]="맑음 이발소";
UA[152]="맑음 장서방";
UA[153]="맑음 정이야";
UA[154]="맑음 조치오";
UA[155]="맑음 진선미";
var ni=0;
function ShowDisplay() // 스스로 자신을 호출하는 재귀함수 (Recursive Function)
{ni++;
if(ni<UA.length) // 배열의 갯수보다 작을 때만 실행
var str=ni; // 숫자 앞에 자릿수만큼 ‘0’으로 채우기
str="00"+str;
str=str.slice(-3);
str=str + "/" + (UA.length-1);
// 출처: https://hashcode.co.kr/questions/1317/%EC%88%AB%EC%9E%90-%EC%95%9E%EC%97%90%EC%9E%90%EB%A6%BF%
// EC%88%98%EB%A5%BC-%EB%A7%9E%EC%B6%94%EA%B8%B0-%EC%9C%84%ED%95%9C-0%EC%9D%84-%EB%84%A3%EA%B8%B0
document.getElementById("Tx").innerHTML=UA[ni];
document.getElementById("Sx").innerHTML=str;
obTimeOut=setTimeout("ShowDisplay()",2500); // 2.5초후에 자기자신을 호출
if(ni>(UA.length)-1)location.reload();}
function StAni(){obTimeOut=window.setTimeout(ShowDisplay,1000);} // 윈도우 로드 후 0.1초 후에 반복함수를 호출합니다.
function Stop(){clearTimeout(obTimeOut);}
window.onload=function(){StAni();}
</Script>
</DIV></BODY></HTML>
<!-- 마지막으로 수정한 시각: 2022-05-28 오전 9:10 -->
--------------------------------------------------------------------------------
~ 하낫둘^ 센넷^^ ~
'짙은 녹색' 카테고리의 다른 글
| 내가 우러르는 그분은 나의 하느님이다! (0) | 2022.05.30 |
|---|---|
| 방문자도 없는데 이럴 바엔 차라리 '무념무상'!!! (0) | 2022.05.29 |
| 블로그에 위젯이란 놈 정말이지 짜기도 맞추기도 어렵네요. (0) | 2022.05.23 |
| 드디어 블로그 페이지에 '머문 시간' 위젯을 완성했다! (1) | 2022.05.21 |
| DC 5v 어댑터 전원 코드 뿌리가 통째로 빠져버렸어!^ (0) | 2022.05.17 |
