Display the current time and countdown function based on javascript

Display the current time and countdown function based on javascript_javascript skills

WBOY

Release： 2016-05-16 15:10:19

Original

1508 people have browsed it

For self-practice, I would like to share with you a piece of js native code.
Date objects are used to handle dates and times.
Date() Returns the date and time of the current day.
getDate() Returns the day of the month (1 ~ 31) from a Date object.
getDay() Returns the day of the week (0 ~ 6) from a Date object.
getMonth() Returns the month (0 ~ 11) from the Date object.
getFullYear() Returns the year as a four-digit number from a Date object.
getYear() Please use getFullYear() method instead.
getHours() Returns the hours (0 ~ 23) of the Date object.
getMinutes() returns the minutes (0 ~ 59) of the Date object.
getSeconds() Returns the seconds of the Date object (0 ~ 59).
getMilliseconds() returns the milliseconds (0 ~ 999) of the Date object.
getTime() Returns the number of milliseconds since January 1, 1970.
getTimezoneOffset() Returns the difference in minutes between local time and Greenwich Mean Time (GMT).
getUTCDate() Returns the day of the month (1 ~ 31) from a Date object based on universal time.
getUTCDay() Returns the day of the week (0 ~ 6) from a Date object based on universal time.
getUTCMonth() Returns the month (0 ~ 11) from the Date object according to universal time.
getUTCFulYear() Returns the four-digit year from a Date object based on universal time.
getUTCHours() Returns the hour (0 ~ 23) of the Date object according to universal time.
getUTCMinutes() Returns the minutes (0 ~ 59) of a Date object according to universal time.
getUTCSeconds() Returns the seconds (0 ~ 59) of a Date object according to universal time.
getUTCMilliseconds() Returns the milliseconds (0 ~ 999) of the Date object according to universal time.
parse() Returns the number of milliseconds from midnight on January 1, 1970 to the specified date (string).
setDate() sets the day of the month (1 ~ 31) in the Date object.
setMonth() sets the month (0 ~ 11) in the Date object.
setFullYear() Sets the year (four digits) in the Date object.
setYear() Please use setFullYear() method instead.
setHours() Sets the hours (0 ~ 23) in the Date object.
setMinutes() Sets the minutes (0 ~ 59) in the Date object.
setSeconds() Sets the seconds (0 ~ 59) in the Date object.
setMilliseconds() Sets the milliseconds (0 ~ 999) in the Date object.
setTime() sets a Date object in milliseconds.
setUTCDate() Sets the day of the month (1 ~ 31) in the Date object according to universal time.
setUTCMonth() Sets the month (0 ~ 11) in the Date object according to universal time.
setUTCFulYear() Sets the year (four digits) in a Date object according to universal time.
setUTCHours() Sets the hour (0 ~ 23) in the Date object according to universal time.
setUTCMinutes() Sets the minutes in the Date object (0 ~ 59) according to universal time.
setUTCSeconds() Sets the seconds in the Date object (0 ~ 59) according to universal time.
setUTCMilliseconds() Sets the milliseconds (0 ~ 999) in the Date object according to universal time.
toSource() returns the source code of this object.
toString() Converts a Date object to a string.
toTimeString() Converts the time portion of a Date object to a string.
toDateString() Converts the date portion of the Date object to a string.
toGMTString() Please use toUTCString() method instead.
toUTCString() Converts a Date object to a string according to universal time.
toLocaleString() Converts a Date object to a string according to the local time format.
toLocaleTimeString() Converts the time part of the Date object to a string according to the local time format.
toLocaleDateString() Converts the date part of the Date object to a string according to the local time format.
UTC() Returns the number of milliseconds from January 1, 1970 to the specified date, according to universal time.
valueOf() returns the original value of the Date object.
Specific implementation code:

<!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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.