javascript_javascript 스킬을 기반으로 현재 시간 및 카운트다운 기능 표시-JS 튜토리얼-php.cn

javascript_javascript 스킬을 기반으로 현재 시간 및 카운트다운 기능 표시

WBOY

풀어 주다： 2016-05-16 15:10:19

원래의

1503명이 탐색했습니다.

자습을 위해 js 네이티브 코드를 공유하고 싶습니다.
날짜 객체는 날짜와 시간을 처리하는 데 사용됩니다.
Date() 현재 날짜의 날짜와 시간을 반환합니다.
getDate() Date 객체로부터 해당 월의 일자(1 ~ 31)를 반환합니다.
getDay() Date 객체로부터 요일(0 ~ 6)을 반환합니다.
getMonth() Date 객체에서 월(0 ~ 11)을 반환합니다.
getFullYear() Date 객체에서 연도를 4자리 숫자로 반환합니다.
getYear() 대신 getFullYear() 메소드를 사용하십시오.
getHours()는 Date 객체의 시간(0 ~ 23)을 반환합니다.
getMinutes()는 Date 객체의 분(0 ~ 59)을 반환합니다.
getSeconds() Date 객체의 초(0 ~ 59)를 반환합니다.
getMilliseconds()는 Date 객체의 밀리초(0 ~ 999)를 반환합니다.
getTime() 1970년 1월 1일 이후의 밀리초 수를 반환합니다.
getTimezoneOffset() 현지 시간과 그리니치 표준시(GMT) 사이의 차이를 분 단위로 반환합니다.
getUTCDate() Date 객체로부터 표준시를 기준으로 해당 월의 일자(1 ~ 31)를 반환합니다.
getUTCDay() 표준시를 기준으로 Date 객체로부터 요일(0 ~ 6)을 반환합니다.
getUTCMonth() Date 객체에서 세계시를 기준으로 월(0 ~ 11)을 반환합니다.
getUTCFulYear() 표준시를 기준으로 Date 객체에서 4자리 연도를 반환합니다.
getUTCHours() Date 객체의 시간(0 ~ 23)을 표준시에 따라 반환합니다.
getUTCMinutes() Date 객체의 분(0 ~ 59)을 표준시에 따라 반환합니다.
getUTCSeconds() Date 객체의 초(0 ~ 59)를 표준시에 따라 반환합니다.
getUTCMilliseconds() Date 객체의 밀리초(0 ~ 999)를 표준시에 따라 반환합니다.
구문 분석() 1970년 1월 1일 자정부터 지정된 날짜(문자열)까지의 밀리초 수를 반환합니다.
setDate()는 Date 객체에 해당 월의 날짜(1 ~ 31)를 설정합니다.
setMonth()는 Date 객체에 월(0 ~ 11)을 설정합니다.
setFullYear() Date 객체에 연도(4자리)를 설정합니다.
setYear() 대신 setFullYear() 메소드를 사용하십시오.
setHours() Date 객체에 시간(0 ~ 23)을 설정합니다.
setMinutes() Date 객체에 분(0 ~ 59)을 설정합니다.
setSeconds() Date 객체에 초(0 ~ 59)를 설정합니다.
setMilliseconds() Date 객체에 밀리초(0 ~ 999)를 설정합니다.
setTime()은 Date 객체를 밀리초 단위로 설정합니다.
setUTCDate() Date 객체에 세계시를 기준으로 날짜(1~31)를 설정합니다.
setUTCMonth() Date 객체의 월(0 ~ 11)을 표준시에 맞춰 설정합니다.
setUTCFulYear() 표준시에 따라 Date 객체의 연도(4자리)를 설정합니다.
setUTCHours() Date 객체의 시간(0 ~ 23)을 표준시에 맞춰 설정합니다.
setUTCMinutes() Date 객체의 분(0 ~ 59)을 표준시에 따라 설정합니다.
setUTCSeconds() Date 객체의 초(0 ~ 59)를 표준시에 따라 설정합니다.
setUTCMilliseconds() Date 객체에 세계시를 기준으로 밀리초(0 ~ 999)를 설정합니다.
toSource()는 객체의 소스 코드를 반환합니다.
toString() Date 객체를 문자열로 변환합니다.
toTimeString() Date 객체의 시간 부분을 문자열로 변환합니다.
toDateString() Date 객체의 날짜 부분을 문자열로 변환합니다.
toGMTString() 대신 toUTCString() 메소드를 사용하십시오.
toUTCString() 표준시에 따라 Date 객체를 문자열로 변환합니다.
toLocaleString() Date 객체를 현지 시간 형식에 따라 문자열로 변환합니다.
toLocaleTimeString() Date 객체의 시간 부분을 현지 시간 형식에 따라 문자열로 변환합니다.
toLocaleDateString() Date 객체의 날짜 부분을 현지 시간 형식에 따라 문자열로 변환합니다.
UTC() 표준시에 따라 1970년 1월 1일부터 지정된 날짜까지의 밀리초 수를 반환합니다.
valueOf()는 Date 객체의 원래 값을 반환합니다.
특정 구현 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>原生js 当前时间 倒计时代码</title>
  <style>
  *{margin:0;padding:0;}
  body{text-align:center;}
  .text{margin-top:150px;font-size:14px;}
  </style>
  <script>
    window.onload=function(){      
      getMyTime(); 
      getMyTime1();  
    }
    //1.前面补0
    function p(n){
      return n<10&#63;'0'+n:n;
    }
    //2.倒计时
    function getMyTime(){      
      var startDate=new Date();
      var endDate=new Date('2017/4/17 11:15:00');
      var countDown=(endDate.getTime()-startDate.getTime())/1000;
      var day=parseInt(countDown/(24*60*60));
      var h=parseInt(countDown/(60*60)%24);
      var m=parseInt(countDown/60%60);
      var s=parseInt(countDown%60);        
      document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
      setTimeout('getMyTime()',500);
      if(countDown<=0){
       document.getElementById('time').innerHTML='活动结束'; 
      }       
    }
    //3.当前时间
    function getMyTime1(){
      var myDate=new Date();
      var year=myDate.getFullYear();
      var month=myDate.getMonth()+1;
      var day=myDate.getDate();
      var week=myDate.getDay();
      var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
      var hour=myDate.getHours();
      var minute=myDate.getMinutes();
      var second=myDate.getSeconds();
      document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
      setTimeout('getMyTime1()',500);
    }
  </script>
</head>
<body>
  <div class="text">
    <p>倒计时间：<span id="time"></span></p>
    <p>当前时间：<span id="time1"></span></p> 
  </div>
</body>
</html>

로그인 후 복사

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.