HTML+CSS layout:
<! DOCTYPE Html>"en"> <meta charset="UTF-8"> <title> Countdown 2</title> <style>/*Reset CSS style reset*/Body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,Select, textarea,input{margin:0; padding:0; } Body{font-size:16px;} Table{border-Collapse:collapse;} Select, Textarea,input{outline:none; Border:none; Background: #fff; } textarea{resize:none; Overflow:auto} a{text-Decoration:none;} li{List-style:none; vertical-align:top} img{border:none; vertical-Align:top}/*End Reset CSS*/. wrap{padding:20px; width:400px; height:450px; margin:100px Auto0; Background:black; Color:white; Font-size:22px; }. Wrap h3{padding:30px0; Text-Align:center; }. Wrap p{text-Align:center;} . Wrap input{width:50px; height:25px;} . Wrap. start{margin:30px Auto; width:200px; height:200px; Font-size:32px; Text-Align:center; Line-height:200px; } </style>class="Wrap"style="Background:black"> class="input"> <input type="text"Name=""Id=" Year"Value=" ."/>years<input type="text"Name=""Id="Mon"Value="8"/>Month<input type="text"Name=""Id=" Day"Value=" in"/>Day</p> <divclass="Start"style="background:red">Click to start the inverted meter</div> <divclass="Showresult">
Countdown:<!--<span class= "Re_year" > </span> year <span class= "Re_mon" > </span> month-to-
<span class= "Re_day" >0</span> days
<span class= "Re_hour" > </span> <span class= "re_min" > </span> min <span class= "Second" > </span> seconds
</div> </div> </body>
First, Countdown: Days time Division seconds
Jqury-element. Get (0)-JS:
<script src= ". /jquery-3.0.0.js "></script> <script> $ (function () {var counttimer = null; $ (". Wrap. Start"). Get (0). onclick = function () {var nowtime = new Date (); var y = $ (". Input input"). Get (0). value; var m = $ (". Input input"). Get (1). value; var d= $ (". Input input"). Get (2). value; var futuretime = new Date (parseint (y), parseint (m)-1, parseint (d), 0,0,0); Note: The month parameter 0-11 represents 1-12. if (Counttimer! = null) {window.clearinterval (Counttimer); } counttimer= Window.setinterval (function () {otime = Gettimecount (futuretime,nowtime ); $ (". Showresult span"). Get (0). InnerHTML = Otime.day; $ (". Showresult span"). Get (1). InnerHTML = Otime.hour; $ (". Showresult span"). Get (2). InnerHTML = Otime.minute; $ (". Showresult span"). Get (3). InnerHTML = Otime.second; }, 1000)}//Custom functions function Gettimecount (futuretime,nowtime) {/* if (futur Etime-nowtime<=0) return {"Day": 0, "hour": 0, "minute": 0, "second": 0};*/var t = Math.floor ((futuretime-nowtime)/1000); var day = Math.floor (t/86400); var h = math.floor (t%86400/3600); var m =math.floor (T%86400%3600/60); var s= t%60; return {"Day":d ay, "hour": H, "minute": M, "second": s}; } }); </script>
Second, countdown: Date and time of day and secondsJqury-element. Get (0)-JS:
<script src= ". /jquery-3.0.0.js "></script> <script> $ (function () {var counttimer = null; $ (". Wrap. Start"). Get (0). onclick = function () {var y1 = $ (". Input input"). Get (0). value; var m1 = $ (". Input input"). Get (1). value; var d1= $ (". Input input"). Get (2). value; Note: The month parameter 0-11 represents 1-12. var futuretime = new Date (parseint (y1), parseint (M1)-1, parseint (D1), 0,0,0); var otime={"Year": 0, "month": 0, "Day": 0, "hour": 0, "minute": 0, "second": 0}; if (Counttimer! = null) {window.clearinterval (Counttimer); } counttimer=window.setinterval (function () {var nowtime = new Date (); Otime = Gettimecount (futuretime,nowtime); $ (". Showresult span"). Get (0). InnerHTML = Otime.year; $ (". ShoWresult span "). Get (1). InnerHTML = Otime.month; $ (". Showresult span"). Get (2). InnerHTML = Otime.day; $ (". Showresult span"). Get (3). InnerHTML = Otime.hour; $ (". Showresult span"). Get (4). InnerHTML = Otime.minute; $ (". Showresult span"). Get (5). InnerHTML = Otime.second; }, 1000); }//Custom functions function Gettimecount (futuretime,nowtime) {/* if (futuretime-nowtime<=0 return {"Year": 0, "month": 0, "Day": 0, "hour": 0, "minute": 0, "second": 0};*/ var year = Futuretime.getfullyear ()-nowtime.getfullyear (); var mon = Futuretime.getmonth ()-nowtime.getmonth (); var day = Futuretime.getdate ()-nowtime.getdate (); var h = futuretime.gethours ()-nowtime.gethours (); var m = futuretime.getminutes ()-nowtime.getminutes (); var s= futuretIme.getseconds ()-nowtime.getseconds (); if (mon<0) {//NOTE: The month parameter 0-11 represents 1-12. year--; Mon=12+mon; } if (day<0) {mon--; day=day+ Getlastday (Nowtime.getfullyear (), Nowtime.getmonth ()); if (h<0) {day--; h=h+24; } if (m<0) {h--; m=m+60; } if (s<0) {m--; s=s+60; } return {' Year ': Year, ' month ': Mon, ' Day ':d ay, ' hour ': H, ' minute ': M, ' second ': s }; }//Custom Function-Gets the number of days of the month (last day is not fixed): Gets the last day of the month Date: The first day of the next month minus one day function getlastday (date) { var new_year = Date.getfullyear (); Take the current year var new_month = (date.getmonth);//Remove the first day of one months, convenient calculation (last day not fixed) var new_date = new Date (new_year,++new_month,1); Take the first day of the current month return (new Date (New_date.gettime () -1000*60*60*24)). GetDate ();//Get the last day of the month} }); </script>
Jqury element. Get (0) convert to JavaScript element-time Countdown