Home > Developer > Web Develop
JS implementation countdown and Time object
JS implementation of the countdown effect code is as follows:
1 <!doctype html>2 3 4 <meta charset= "Utf-8" >5 <title> Untitled Document </title>h6 <style>7#box {8 width:100%;9height:400px;10Background:black;11Color: #fff;font-size:40px;line-height:400px;text-Align:center;15}</style><script>Window.onload =function(){19var OBox = document.getElementById (' box ');20var odate =New Date ();//Gets the current time;Odate.setfullyear (2016,11,31);//Automatic rounding;Odate.sethours (0,0,0,0);2324functionCountdown () {25//The time stamp of the future timestamp minus the current time;26var ms = Odate.gettime ()-NewDate (). GetTime ();2728//Milliseconds converted into seconds29var oSec = parseint (ms/1000);3031//Seconds to convert all day32var oday = parseint (osec/86400);3334//Less than the number of seconds left in a day;osec%=86400;3637//Convert into hours38var ohour = parseint (osec/3600);3940//The number of seconds left in less than an hour;osec%=3600;4243//Convert into minutes44var omin = parseint (OSEC/60);4546//The number of seconds left in less than one minute;Osec%=60; 48 49 obox.innerhtml = ' distance December 31, 2016 also: ' +oday+ ' Day ' +ohour + ' +omin+ ' +osec+ ' ; } 51 Countdown (); 52 setinterval (Countdown,1000 }54 </script>55 56 57 <body> 58 <div id= "box" > Distance December 31, 2016 also: xx days xx xx seconds </div> 59 </body>60
Implementation results in the following:
Time stamp:
Time object:
Get Time: var odate = new Date (); oyear = Odate.getfullyear (); OMon = Odate.getmonth (); oday = Odate.getdate (); Ohou = Odate.gethours (); omin = Odate.getminutes (); OSec = Odate.getseconds (); Oweek = Odate.getday (); Set time: odate.setfullyear (year, month, day); odate.setmonth (month); odate.setdate (Sun); odate.sethours (hours, minutes, seconds, milliseconds); time is automatically rounded up;
This is a small effect, if there is not the place to communicate with each other;
JS-------"(small effect) to achieve the countdown and time objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
