Javascript로 여러 이벤트의 카운트다운을 간단하게 만드는 방법

13548 단어 HTMLJavaScript
메인 페이지에 이벤트까지 카운트다운을 하는 방법이 많아요.

위와 같이 한 페이지에 여러 사건을 삽입하는 카운트다운 방법은 흔치 않은 것 같다.
이번에 자신이 만든 것을 비망록으로 남겨 두다.
countdown.js
function countdown(y,m,d,eventname){
    year=y
    mon=m-1
    day=d-1
    xday = new Date(year,mon,day,24,00,00);//基準になる年月日
    nowday = new Date();
    passtime= xday.getTime()-nowday.getTime();  //今から基準になる日までの経過時間　1/1000秒単位
    passtime0 = passtime                        // 時間で表記するための文字列。

    cnt_day = Math.floor(passtime/(1000*60*60*24));// カウントダウン表示 (日にち) の取得
    passtime = passtime -(cnt_day*(1000*60*60*24)); // 経過秒から(日にち)を引く

    cnt_hour = Math.floor(passtime/(1000*60*60));// カウントダウン表示 (時) の取得
    cnt0_hour = Math.floor(passtime0/(1000*60*60));//カウントダウン表示(時)の取得(日にち抜き)
    passtime = passtime -(cnt_hour*(1000*60*60)); // 経過秒から(時)を引く

    cnt_min = Math.floor(passtime/(1000*60)); // カウントダウン表示 (分) 取得
    passtime = passtime -(cnt_min*(1000*60));// 経過秒から(分)を引く

    cnt_sec = Math.floor(passtime/1000);// カウントダウン表示 (秒) 取得
    passtime = passtime -(cnt_sec*(1000)); // 経過秒から(秒)を引く


    // 分、秒を２桁で表示する。
    if(cnt_min<10){cnt_min = '0' + cnt_min;}
    if(cnt_sec<10){cnt_sec = '0' + cnt_sec;}



    if((xday - nowday) > 0){
        x = eventname+"まで「 "+cnt_day+"日"+cnt_hour+"時間"+cnt_min+"分"+cnt_sec+"秒"+
            " 」("+cnt0_hour+"時間"+cnt_min+"分"+cnt_sec+"秒)"
    }
    else {
        x = eventname+"は終了いたしました。"
    }
    return x
}
위의 코드는countdown입니다.js 만들기
/var/www/i/js/등 적당한 디렉터리에 저장합니다.
이 함수가'활동하는 연, 월, 일, 활동명'을 준다면
  • 행사 당일 0시까지..."(행사명)"날○시간○○○분○초"(○시간○분○초)"
  • 행사 당일 0:00 이후..."(행사명은) 끝났다."
    • 는 문자열을 반환하는 함수입니다.
    다음은 카운트다운을 실제로 끼워넣고 싶어요.> 파일의 head 및 body에 설명되어 있습니다.
    index.html
         <head>
      ...
      <script type="text/javascript" src="/js/countdown.js"></script>
     </head>
     <body>
      ...
      <script type="text/javascript">
       window.onload=showday;
       function showday(){
         document.tbox1.dspday.value=countdown(2015,11,22,'ガイア祭');
         document.tbox2.dspday.value=countdown(2016,1,31,'第207回TOEIC');
         document.tbox3.dspday.value=countdown(2016,3,14,'2016春海洋学会');
         timerID = setTimeout('showday()', 10);
       }
      </script>

      <FORM name="tbox1">
        <INPUT name="dspday" type="text">
      </FORM>

      <FORM name="tbox2">
        <INPUT name="dspday" type="text">
      </FORM>

      <FORM name="tbox3">
        <INPUT name="dspday" type="text">
      </FORM>
      ...
    </body>
  • 내는countdown입니다.js가 저장된 디렉터리에 따라 변경합니다.
  • 에서 이전에 만든countdown 함수를 호출했습니다.
    countdown 함수만 직접 호출하면 업데이트 시간이 줄어들지 않기 때문에 showday 함수로 countdown 함수를 둘러싸고 showday 함수 이외에
    "window.onload=showday;"
    를 입력합니다.이렇게 하면 시간이 저절로 줄어든다.
  • 에서 함수를 통해 문자열을 획득하고 실제적으로 표시합니다.
    • 실제 이쪽 방법으로 만든 카운트다운 페이지는여기.입니다.
    ember-mirage-gen 소개
    Java에서 PowerPoint 슬라이드에 오디오 및 비디오 파일을 추가하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage