JavaScript effects Implementation--the current time and countdown effect of simple examples

JavaScript effects Implementation--the current time and countdown effect of simple examples _javascript skills

Last Update:2017-01-19 Source: Internet

Author: User

Tags getdate time in milliseconds

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The implementation of this effect is key to the use of date objects and settimeout.

A total of three examples, HTML structure as follows, do not add CSS style.

<body>
  Current time: <p id= "P1" ></p>
  Countdown to the university Entrance Examination: <p id= "P2" ></p> time
  -limited snapped up: <p id= "P3" ></p>
</body>

Main experience of JavaScript implementation

Window.onload=function () { 
  var P1=document.getelementbyid ("P1"),
    P2=document.getelementbyid ("P2");
    P3=document.getelementbyid ("P3");
  Showtime1 ();
  Showtime2 ();
  Showtime3 ();
}

1. Simple implementation of the current time display

function showtime1 () {
   var nowdate=new date ();//Create Date Object Nowdate to get current time
   var year=nowdate.getfullyear (),// Get year
     month=nowdate.getmonth () +1,//get the Month, getmonth () get 0-11, need to add 1
     date=nowdate.getdate (),//Get the daily
     day= Nowdate.getday (),//Get one day of the week, Getday () get 0-6
     week=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
     h= Nowdate.gethours (),
     m=nowdate.getminutes (),
     s=nowdate.getseconds (),
     h=checktime (h),// function checktime for formatting, minutes, seconds
     M=checktime (m),
     S=checktime (s);
   P1.innerhtml=year+ "The Year" +month+ "month" +date+ "the Day" +week[day]+h+ ":" +m+ ":" +s;
   SetTimeout (showtime1, 1000);//repeatedly executing function itself
 }

The checktime functions are as follows:

function Checktime (i) {
  if (i<10) {
   i= "0" +i;
  }
  return i;
}

Because the time format normally seen is 00:00:01, and gethours,getminutes,getseconds get the format is 0 to 9, not 00 to 09 such format. So in the process of turning from 9 to 10, there is a number that turns into a double digit, which also changes to 0 seconds in charge 59 seconds or 59 points to 0, or 23 o'clock to 0 o'clock.

For example 23:59:59 the next second should become 00:00:00, if the Checktime function is not used for processing, it will become 0:0:0, so the format is a little less uniform, and visually there are also words increase or decrease the mutation. (The following two examples do not use the Checktime function to handle the seconds and minutes!!! )

2. The countdown effect realization of the college entrance examination

function showTime2 () {
var nowtime=new date (),//Get the current time  endtime=new date ("2017/6/6");//define End time
  var Lefttime=endtime.gettime ()-nowtime.gettime (),//distance end time in milliseconds
    Leftd=math.floor (lefttime/(1000*60*60*24)),// Count Days
    Lefth=math.floor (lefttime/(1000*60*60)%24),//Count hours
    Leftm=math.floor (lefttime/(1000*60)%60),// Count minutes
    Lefts=math.floor (lefttime/1000%60),//Count seconds
  p2.innerhtml=leftd+ "Days" +lefth+ ": +leftm+": "+lefts;
  SetTimeout (showTime2, 1000);  
}

One of the more important points:

The ① definition ends at the time endtime=new date ("2017/6/6") is a Date object with a parameter through new, direct new date () is directly fetched to the current time;

The ②gettime () method gets the number of milliseconds from January 1, 1970.

③ the number of days, hours, minutes and seconds,% (modulo operation). Gets the number of milliseconds to end the distance (the remaining number of milliseconds), divided by 1000 to get the remaining seconds, divided by 60 to get the remaining minutes, divided by 60 to get the remaining hours. Divide by 24 to get the remaining days. The number of seconds remaining lefttime/1000 modulo 60 gets the number of seconds, the remaining minutes lefttime/(1000*60) modulo 60 Gets the number of minutes, the remaining hours die lefttime/(1000*60*60) modulo 24 gets the hours.

3. The countdown effect of timed snapping

function Showtime3 () {
var nowtime=new date (),
endtime=new date ("2020/1/1,00:00:00"),/Set end time
Leftti Me=parseint ((Endtime.gettime ()-nowtime.gettime ())/1000),
D=math.floor (lefttime/(60*60*24)),
h=　　Math.floor (lefttime/(60*60)%24),
M=math.floor (lefttime/60%60),
S=math.floor (lefttime%60);
P3.innerhtml=d+ "Day" +h+ "hour" +m+ "minute" +s+ "seconds";
SetTimeout (Showtime3, 1000);  
}

In fact, the same as the second example, the difference is the setting of the end time new Date ("2020/1/1,00:00:00")

Here's the complete code

<! DOCTYPE html>

Above this JavaScript effect implementation--the current time and countdown effect of a simple example is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More