jquery - Javascript for time left in the day? - Stack Overflow

admin管理员组

文章数量:1289834

I understand how to work countdown timers and date timers to an extent (to a specified date i.e YYYY-MM-DD) but I'm working on a web development college project where I wish for one of my web pages (JSP file) to have a countdown timer with the number of seconds left in the day from when the web application launches.

The web page will also include an Ajax function where the user can click a button and a random motivational message will appear (this particular piece of code I know, but it's just to give you an idea of why I want this countdown timer).

I understand how to work countdown timers and date timers to an extent (to a specified date i.e YYYY-MM-DD) but I'm working on a web development college project where I wish for one of my web pages (JSP file) to have a countdown timer with the number of seconds left in the day from when the web application launches.

The web page will also include an Ajax function where the user can click a button and a random motivational message will appear (this particular piece of code I know, but it's just to give you an idea of why I want this countdown timer).

• javascript
• jquery
• timer
• countdown

Share Improve this question Follow asked Dec 9, 2014 at 13:58 John DeeganJohn Deegan 3922 silver badges66 bronze badges 2

• Check out this plugin solution – Tomanow Commented Dec 9, 2014 at 14:01
• 2 Create a date a. Add one day. Set time to midnight. Create a second date b, give (a - b) / 1000 – Paul S. Commented Dec 9, 2014 at 14:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Moment.js is a great library for date math. http://momentjs./

Using Moment, you could do a one liner like this.

<script src="//cdnjs.cloudflare./ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script>
  document.write(moment.duration(moment().add(1, 'day').startOf('day').diff(moment())).asSeconds())
</script>

or an easier to understand version:

<script src="//cdnjs.cloudflare./ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script>
  var now = moment(),
    tomorrow = moment().add(1, 'day').startOf('day'),
    difference = moment.duration(tomorrow.diff(now))

  document.write(difference.asSeconds())
</script>

UPDATED

Simply pare the Date object you get from Date.now() with the date of tomorrow (which you create from the first date object, adding one day);

var actualTime = new Date(Date.now());

var endOfDay = new Date(actualTime.getFullYear(), actualTime.getMonth(), actualTime.getDate() + 1, 0, 0, 0);


var timeRemaining = endOfDay.getTime() - actualTime.getTime();

document.getElementById('timeRemaining').appendChild(document.createTextNode(timeRemaining / 1000 + " seconds or " + timeRemaining / 1000 / 60 / 60 + " hours"));

document.getElementById('dayProgression').value = 1 - (timeRemaining / 1000 / 60 / 60 / 24);

<span id="timeRemaining"></span>

<div>
  <span>How much of the day has passed:</span>
  <progress id="dayProgression" value="0"></progress>
</div>

Example JSFiddle

Try to use this Javascript code:

var year = 2015 , month = 5 , day = 15;
var date = new Date();
var enddate = new Date(year , month , day); 

document.write( date - enddate );

You can edit this code for your site.

本文标签： jqueryJavascript for time left in the dayStack Overflow