Adjusting Countdown.js functionality

Question

Adjusting Countdown.js functionality

I stumbled upon countdown.js after coming across this helpful resource:

My knowledge in JavaScript is limited, and I'm looking to configure the countdown to start exactly a week from today, which would be on February 24, 2014.

Is there a way to tweak the code to achieve this?

Below is an excerpt of the current setup in my html file:

<head>
<script src="/js/countdown.js"></script>  
</head>

<h1 id="countdown-holder"></h1>  

<script>  
  var clock = document.getElementById("countdown-holder")  
    , targetDate = new Date(2050, 00, 01); // Jan 1, 2050;  

  clock.innerHTML = countdown(targetDate).toString();  
  setInterval(function(){  
    clock.innerHTML = countdown(targetDate).toString();  
  }, 1000);  
</script>

javascript javascript-framework

Answer 1

Answer №1

To update the target date, simply replace

targetDate = new Date(2050, 00, 01);

with

targetDate = new Date(2014, 01, 24);

Remember that the date constructor takes the arguments in the order of year, month-1, day.

Keep in mind that this is meant for setting a fixed date (like Feb 24, 2014) rather than a relative date (such as "one week from today").

Answer 2

To update the target date, simply replace

targetDate = new Date(2050, 00, 01);

with

targetDate = new Date(2014, 01, 24);

Remember that the date constructor takes the arguments in the order of year, month-1, day.

Keep in mind that this is meant for setting a fixed date (like Feb 24, 2014) rather than a relative date (such as "one week from today").

Answer 3

Answer №2

  let currentDate = new Date();
  const daysToAdd = 7;
  currentDate.setDate(currentDate.getDate() + daysToAdd); 

  const countdownClock = document.getElementById("countdown-holder")  
    , targetDeadline = currentDate;  

  countdownClock.innerHTML = showCountdown(targetDeadline).toString();  
  setInterval(function(){  
    countdownClock.innerHTML = showCountdown(targetDeadline).toString();  
  }, 1000);

This code snippet will initiate a counter starting from 7 days ahead of the current date.

Answer 4

  let currentDate = new Date();
  const daysToAdd = 7;
  currentDate.setDate(currentDate.getDate() + daysToAdd); 

  const countdownClock = document.getElementById("countdown-holder")  
    , targetDeadline = currentDate;  

  countdownClock.innerHTML = showCountdown(targetDeadline).toString();  
  setInterval(function(){  
    countdownClock.innerHTML = showCountdown(targetDeadline).toString();  
  }, 1000);

This code snippet will initiate a counter starting from 7 days ahead of the current date.

Answer 5

Answer №3

Give this a try, check out the js fiddle link below:

http://jsfiddle.net/rnewsome/D3tPR/

This code snippet requires an HTML element on your webpage like this:

<div id="counter" />

var StartTime = new Date();
var counter = document.getElementById("counter");
var timeout = null;

function GetCount() {
    var timeToExpire = new Date(StartTime);
    timeToExpire.setDate(timeToExpire.getDate() + 7);

    var ms = timeToExpire.getTime() - new Date().getTime();
    console.log(ms + "ms", (ms/1000) + "s");

    return ms;
};

function UpdateUI() {
    var timeRemaining = parseInt(GetCount() / 1000);
    counter.innerHTML = timeRemaining + " seconds"; 
    if(timeRemaining > 0) {
        timeout = setTimeout(UpdateUI , 1000); // Update Counter every second
    }
}

// Initialize
UpdateUI();

Answer 6

Give this a try, check out the js fiddle link below:

http://jsfiddle.net/rnewsome/D3tPR/

This code snippet requires an HTML element on your webpage like this:

<div id="counter" />

var StartTime = new Date();
var counter = document.getElementById("counter");
var timeout = null;

function GetCount() {
    var timeToExpire = new Date(StartTime);
    timeToExpire.setDate(timeToExpire.getDate() + 7);

    var ms = timeToExpire.getTime() - new Date().getTime();
    console.log(ms + "ms", (ms/1000) + "s");

    return ms;
};

function UpdateUI() {
    var timeRemaining = parseInt(GetCount() / 1000);
    counter.innerHTML = timeRemaining + " seconds"; 
    if(timeRemaining > 0) {
        timeout = setTimeout(UpdateUI , 1000); // Update Counter every second
    }
}

// Initialize
UpdateUI();

Adjusting Countdown.js functionality

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the JQuery Post and Get methods to not respond or execute when they are invoked?

Generating multiple div elements within an AJAX iteration

As we iterate through each individual array within the multi-dimensional array

What is the best way to display a welcoming message only once upon visiting the home page?

Utilize the client's IP address as a cookie in order to recognize return visits and showcase a special message following the initial visit

Discover the versions of key libraries/modules within the webpack bundle

Upcoming JWT authentication module

Switch from Index.html to Index.html#section1

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

Navigating to a specific element following an AJAX request

Lambda function failing to execute Auth0 methods through the Auth0 node-auth0 SDK

Is there a way to have one element automatically expand when another is selected?

Traversing a deeply nested array of objects, comparing it with a separate array of objects

The function Jquery.html() seems to be malfunctioning in IE7, however, innerHTML is working correctly in the

My form does not receive the Bootstrap classes when using the jQuery script

The method to disable the dropdown for a select tag in a Polymer Dom-module is not functioning properly

Incorporate a hyperlink into a React Material-UI DataGrid

What is the method for invoking a JSON web service with jQuery that necessitates basic authentication?

Switch the class of the child element from the previous element using jQuery

JSON data cannot be transmitted using AJAX