JavaScript implementation Countdown and window Tip special effects _javascript Tips

In the front-end development, it is inevitable to use the countdown. If you do double an activity, in the beginning of the activity half a month ago need to do some publicity work, need to inform the user when the preferential activities began. This is the time to use the countdown, such as in the whole station of a page to remind users of the activity when the start and so on. And in the late stage of activity, especially in the end of the activity only 1 days or so, it is necessary to use the window countdown. This countdown is set at the top of the homepage of the whole station (of course it can also be set in other places, such as the central part of the first page), and set the pop-up window 10 seconds after the automatic disappearance, by the user decides whether to click on the corresponding activity page, buy products.

Required Technical support: Css3,jquery Library;

The HTML code is as follows:

<section class= "The_body" >
  <div class= "Countdown" >
     
 

The CSS code is as follows:

. the_body{width:100%;max-width:640px;min-width:320px;margin:0 Auto; Countdown{background: #ffec20;p adding:10px 0
;} . Countdown h3{margin:0;padding:5px 0;color: #f53544; text-align:center;font-size:14px; countdown. countdown_time{
Display:block;width:100%;text-align:center;} . Countdown. Countdown_time i{display:inline-block;position:relative;padding:0
3px;font-style:normal;background: #fff; margin:0
2px;border-radius:3px;box-shadow:0px 1px 1px #ccc; border-bottom:1px solid #cfcfcf; font-weight:bold;} . Countdown. Countdown_time i:after{content: "width:100%;border:1px solid #cfcfcf; border-width:1px 0 0;position:
absolute;
bottom:1px;left:0;} . Countdown. Countdown_time i:before{content: "width:100%;border:1px solid #cfcfcf; border-width:1px 0 0;position:
absolute;
bottom:3px;left:0;} . Countdown. Countdown_time Date_text{background:transparent;font-weight:bold;box-shadow:none; border-bottom:none
; text-decoration:none;padding:0;} . Countdown. Countdown_time date_text:after{content: ""; bordEr:none;}
 . Countdown. Countdown_time date_text:before{content: ""; border:none;}

The

JavaScript code is as follows:

<script> function Remaintime () {var date = new Date ("1,2015 00:00:00");/Set countdown end time var nowdate = new Date (); Get current date var remaintime = Date.gettime ()-nowdate.gettime ();//Get the number of milliseconds now to Countdown end time var remainday = Math.floor (Remaintime/ (1000 * 60 * 60 * 24)); /Calculate the remaining days var remainhour = Math.floor ((remaintime-remainday * 1000 * 60* 60 * 24)/(1000 * 60 * 60))//Calculate the remaining hours of Var R Emainminute = Math.floor (remaintime-remainday * 1000 * 60* * 24-remainhour * 1000 * 60 * 60)/(1000 * 60))//calculated to be left Number of minutes var Remainsecond = Math.floor (remaintime-remainday * 1000 * * * 24-remainhour *-1000 * 60-remainmin UTE * 1000 * 60)/(1000))//Calculate the remaining seconds//when the remaining number of days is less than 10 o'clock, add a 0 before it, the following remaining hours, minutes and seconds are the same if (Remainday <) {Remainday
 = "0" + remainday;
 }else{remainday+= "";
 When the remaining number of days is greater than 10 o'clock, the number of days remaining is numeric, which is required to convert the value to a string, and the remaining hours, minutes and seconds of the following are the same as this} if (Remainhour <) {Remainhour = "0" + remainhour;
 }else{remainhour+= "";} if (Remainminute <) {Remainminute = "0" + remainminUte
 }else{remainminute+= "";}
 if (Remainsecond <) {Remainsecond = "0" + remainsecond;
 }else{remainsecond+= "";}
 $ (". The_days i:first-child"). HTML (REMAINDAY.SUBSTR (0, 1));
 $ (". The_days i:last-child"). HTML (REMAINDAY.SUBSTR (1, 2));
 $ (". The_hours i:first-child"). HTML (REMAINHOUR.SUBSTR (0, 1));
 $ (". The_hours i:last-child"). HTML (REMAINHOUR.SUBSTR (1, 2));
 $ (". The_minutes i:first-child"). HTML (REMAINMINUTE.SUBSTR (0, 1));
 $ (". The_minutes i:last-child"). HTML (REMAINMINUTE.SUBSTR (1, 2));
 $ (". The_seconds i:first-child"). HTML (REMAINSECOND.SUBSTR (0, 1));
 $ (". The_seconds i:last-child"). HTML (REMAINSECOND.SUBSTR (1, 2));
SetTimeout ("Remaintime ()", 1000);//set 1 seconds after the call to the Remaintime function} remaintime ();
 settimeout (function () {$ (". Countdown"). Hide ();},10000)//On the home page set the effect of the window, in the pagination of this code can not be set </script>

This is my own write the countdown effect, of course, everyone can according to their hobbies, set the countdown effect. If you can only show "how many days and minutes", but personally feel not set to "a few days when a few seconds" enough atmosphere. The style can also be changed according to their own preferences, but the ultimate effect of manufacturing activities before the start of the fiery atmosphere.

As for the HTML code, CSS code, and JavaScript code here, it is also noted that:

1.html code is not much to say, mainly is how to set up the DOM to easy JavaScript operation;

2.css code, here is mainly used: before and: After Pseudo class, set the countdown value of the stereo effect;

3.JavaScript code is also a very simple function, where you need to convert the rest of the time to a string so that the string can be intercepted and displayed. In addition, use the SetTimeout function to set every 1 seconds to perform a function to dynamically display the remaining time, of course, you can also use the SetInterval function, the two functions set the effect is basically the same.

At this point, a simple countdown effect is made. If you want to set the window countdown on the home page, you can set the background more cool, so you can attract users to click, and set 10 seconds after the window automatically disappear (or set a close button, etc.).

The countdown can be implemented in a number of ways, here is the first introduction to this one, and later have time will continue to summarize.

The above is the entire content of this article, I hope to be able to understand JavaScript help.