Jqury element. Get (0) convert to JavaScript element-time Countdown

Source: Internet
Author: User
Tags getdate

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.