호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
기념일 계산 자바스크립트(지난날 남은날 모두 계산 가능) 2003-05-28 21:41:26, 조회 : 2,644, 추천 : 9

설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 이라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^


제 홈의 첫 화면에서 나오는 중요한 날이 며칠 남았는지를 계산하여 주는 자바스크립트 소스입니다..
이건 날짜와 화면에 나타나는 글자들을 바꿔줘야 하기 때문에 js 파일로 따로 만들지 않았습니다..
하지만 꼭 바꿔야 하는 부분만 바꾸고 제대로 HTML 문서에 붙여넣어서 사용하면 실행에 오류가 나지는 않을꺼에요..
게시판이나 메일에서는 사용하지 마세요.. 스크립트를 사용하지 못하게 막아놓은 곳에서는 실행은 안되고 오류만 나거든요..

아래에 예로 보여주는 소스는 올해(2000년)의 크리스마스가 며칠 남았는지를 계산하여 주는 소스입니다..
날짜의 계산은 소스가 실행된 화면을 보여주는 컴퓨터의 시간을 기준으로 계산을 하기 때문에 날짜가 이상하게 나오면 컴퓨터의 날짜와 시간을 제대로 고쳐주시면 됩니다..


계산하는 소스)
(우선 이 것을 HTML 문서의 위쪽에 아무 곳이나 빈줄을 만들고 붙여넣기를 하세요.. )
홈페이지에 있는 문서에서 소스를 삽입할 때에는 홈페이지 관리자 기능으로 들어가서 HTML 문서의 수정이나 편집 메뉴를 이용하면 됩니다..



<script language="JavaScript">
<!--//기념일까지 카운트 다운
function memorial() {
var memory = "X-Mas"; //여기에 기념일의 이름을 쓴다.
var memory_day = new Date("Dec 25, 2003 00:00:00"); //여기에 기념일의 날짜와 시간을 기입한다.
var today = new Date();

with(Math) {
var t = (memory_day.getTime() - today.getTime())/(24 * 60 * 60 * 1000);
var day = ceil(t);
var msg = (day > 0) ? memory + " : D-" + day:
(day == 0) ? "오늘은 "+ memory +"입니다. ": memory +"(로부터 " + abs(day) + "일째입니다.) ";
}
document.write(msg + " ");
}
//-->
</script>




위의 소스에서 // 뒤에 있는 것은 실행과는 상관이 없는 소스에 대한 설명이랍니다..

소스 설명)

  • var memory = "X-Mas"; : 'X-Mas'가 기념일의 이름입니다.. 기념일 제목을 한글이든 영문이든 편하게 쓰세요..

  • var memory_day = new Date("Dec 25, 2000 00:00:00"); : 기념일의 날짜를 적습니다.. new Date("월 일, 년도 시:분:초"); 단위로 적어주면 됩니다..

  • var msg = (day > 0) ? memory + " : D-" + day: : 기념일까지의 남은 날이 0보다 클 때.. 아직 안되었다는 얘기죠.. 이 때에는 "X-Mas : D-며칠" 이렇게 표시해 주라는 것입니다..

  • (day == 0) ? "오늘은 "+ memory +"입니다. ": memory +"(로부터 " + abs(day) + "일째입니다.) "; : 기념일이 0인 경우(기념일인 경우).. 기념일에는 "오늘은 X-Mas입니다." 처럼 보여주라는거구요.. 0이 아닌 경우(기념일이 지난 다음날부터)는 "X-Mas(로부터 1일째입니다.)" 처럼 보여주라는 것입니다..

  • document.write(msg + " "); : 계산한 날짜를 화면에 출력해주는 부분입니다.. memorial() 함수가 실행이 되면 이 부분이 실행되어 화면에 내용이 나타나는 것이죠.. 출력되는 글씨에 색깔을 넣거나 글자크기를 바꾸거나 하고 싶다면 다음과 같이 수정하면 됩니다..


    document.write('<font style="font-family:굴림; color:red; font-size:15pt">' + msg + '</font> ');


    위의 소스는 계산을 해 주고 어떻게 나타내라는 것만 처리한 것이구요.. 실제로 화면에 며칠 남았는지 보여주는 것은 다시 같은 HTML 문서에서 위의 <script> ~ </script> 소스를 사용한 후 문서의 아래 부분에 카운트다운한 날짜를 보여주는 스크립트를 한 번 더 써줘야 합니다..
    아래가 그 소스죠..


    계산한 날짜를 화면에 보여주는 소스)


    <script language="JavaScript">
    <!--
    memorial(); //위의 memorial을 불러서 출력을 해주는 부분
    //-->
    </script>



    소스 설명)

  • memorial(); : 기념일을 계산하는 소스에 있는 memorial() 함수 부분을 여기에서 출력을 시키는 것입니다.. 정확히 말하면 화면에 내용을 보여주는 document.write() 매소드는 memorial() 함수에 있습니다.. 함수는 자기 자신이 스스로 실행을 못하기 때문에 여기에서 함수 이름을 써서 함수를 실행시킨 것입니다..


    추가 설명)

    이 소스는 현재 컴퓨터 시계를 기준으로 처리되는 카운터이구요.. 지정한 날짜가 현재 날짜보다 이전 날짜인지 지난 날짜인지에 따라서 지난날인지 남은날인지를 계산하는 소스가 되겠죠..
    한 문서에서 여러 카운트를 하고 싶다면 이 소스에서 memorial() 함수 부분을 그대로 복사해서 memorial1(), memorial2() 처럼 추가로 기념일을 계산하는 스크립트 소스 부분에 만들어두면 됩니다..
    함수의 시작은 memorial() 뒤의 { 에서부터 짝이 되는 } 까지입니다.. 안에 with(Math) { } 가 있지만 이건 함수가 아니고 memorial() 함수 안에 있는 처리 명령입니다..
    memorial1(), memorial2() 함수를 추가로 만들었다면 화면에 나타나게 할 때에는 나타나게 하고 싶은 문서의 위치에서 계산한 날짜를 화면에 보여주는 소스처럼 memorial1(); memorial2(); 처럼 지정을 해줘야 합니다.. 안그럼 화면에 아무 것도 나타나지 않죠..


    지나온 날과 남은 날 계산 예제 소스)


    <script language="JavaScript">
    <!--//기념일까지 카운트 다운
    function memorial() {
    var memory = "X-Mas"; //여기에 기념일의 이름을 쓴다.
    var memory_day = new Date("Dec 25, 2003 00:00:00"); //여기에 기념일의 날짜와 시간을 기입한다.
    var today = new Date();

    with(Math) {
    var t = (memory_day.getTime() - today.getTime())/(24 * 60 * 60 * 1000);
    var day = ceil(t);
    var msg = (day > 0) ? memory + " : D-" + day:
    (day == 0) ? "오늘은 "+ memory +"입니다. ": memory +"(로부터 " + abs(day) + "일째입니다.) ";
    }
    document.write(msg + " ");
    }

    function memorial1() {
    var memory = "2003년 재현 생일"; //여기에 기념일의 이름을 쓴다.
    var memory_day = new Date("Nov 7, 2003 00:00:00"); //여기에 기념일의 날짜와 시간을 기입한다.
    var today = new Date();

    with(Math) {
    var t = (memory_day.getTime() - today.getTime())/(24 * 60 * 60 * 1000);
    var day = ceil(t);
    var msg = (day > 0) ? memory + " : D-" + day:
    (day == 0) ? "오늘은 "+ memory +"입니다. ": memory +"(로부터 " + abs(day) + "일째입니다.) ";
    }
    document.write(msg + " ");
    }
    //-->
    </script>

    <script language="JavaScript">
    <!--
    memorial(); //위의 memorial1을 불러서 출력을 해주는 부분
    memorial1(); //위의 memorial1을 불러서 출력을 해주는 부분
    //-->
    </script>



    지나온 날과 남은 날 계산 예제 실행 화면)



    참고)
    바로 위의 소스에서는 memorial()의 내용과 memorial1()의 내용이 구분이 잘 안될까봐 document.write("<br>"); 이라고 다음 줄로 넘어가게 하도록 <br> 태그를 사용한 것입니다..


  • 2022-06-27
    16:48:50


      추천하기   목록보기

    현재글을 이메일로 보내기

    No 제 목 글쓴이 작성일 조회
    628   핸폰 문자메시지 붙여쓰면 통화요금 줄어     12-11 18:01 2756
    627   [플래시 동영상] 포토샵 기본 기능 설명     10-29 12:51 2746
    626   리얼플레이어 파일(ra, rm)을 배경음악으로 듣기     05-24 18:42 2740
    625   [펌] META(메타) 태그     05-15 00:41 2737
    624   왕초보들의 보안 10계명 - 퍼옴     05-25 23:30 2735
    623   파일 확장자 설명     09-14 10:03 2733
    622   문서 안에서 다른 문서를 불러오는 IFRAME 태그     05-24 16:44 2732
    621   IE의 [파일] - [다른 이름으로 저장] 버튼 만들기     11-21 06:46 2717
    620   글씨에 마우스를 가져가면 글씨의 배경색이 바뀌는 소스     05-31 21:36 2715
    619   비가 내려오는 소스 - 17     09-08 04:56 2695
    618   마우스 가져가면 흐려지고 마우스 밖으로 가면 밝아지는 그림     05-28 23:30 2692
    617   마우스를 올리면 버튼의 배경색이 바뀌는 소스     05-31 21:19 2688
    616   [포토샵] 액션의 spatter 효과로 테두리 만들기     09-26 02:13 2664
      기념일 계산 자바스크립트(지난날 남은날 모두 계산 가능)     05-28 21:41 2644
    614   3종류의 호빵이 내려오는 소스     05-24 13:56 2625
       [1][2][3][4][5][6][7][8][9] 10 ..[51] [다음 10개]
     
    Copyright 1999-2022 Zeroboard / skin by Praise Jesus
    Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.