Help with Dual Javascript countdown clock

Question

I am having a little trouble figuring out how to make this work properly, I am trying to put a small countdown clock in the left column and one in the right column, which will show a countdown to two separate dates. I was able to create a single countdown clock using the below code and was hoping to be able to be able to tweak the code enough to allow it to run on a second CEWP with a different date. Is it possible to run two Javascript files on the page without them interferring with eachother? Thank you anyone that can lend a quick hand.

    <style type="text/css">
.container{
    text-align: center;
    background: #f63536;
  font-family: sans-serif;
  font-weight: 100;
  height:115px;
  width:215px;
}

h3{
  color: #FFFFFF;
  font-weight: 100;
  font-size: 16px;
  margin: 0px 0px 5px;
  padding-top:3px;
}

#clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 20px;
}

#clockdiv > div{
    padding: 5px;
    border-radius: 3px;
    background: #ff5b5b;
    display: inline-block;
}

#clockdiv div > span{
    padding: 5px;
    border-radius: 3px;
    background: #ab0202;
    display: inline-block;
}

.smalltext{
    padding-top: 5px;
    font-size: 13px;
}

</style>

<div class="container">

<h3>Countdown Clock Left</h3>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hrs.</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Min.</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Sec.</div>
  </div>
</div></div>

<script>
function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'October 31 2015 00:00:50';
initializeClock('clockdiv', deadline);
</script>

score 2 · Accepted Answer · answered Oct 05 '15 at 17:35

This should work just fine if you create a copy of the html markup and rename the outer div from clockdiv to anything else, like clockdiv2

<h3>Countdown Clock Right</h3>
<div id="clockdiv2">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  ...
</div></div>

Then you'll need to add another deadline in the javascript code section

var deadline2 = <Your second date value>

And finally you'll call the initializeClock function again for your second clock:

initializeClock('clockdiv2', deadline2);

I would not make an entire copy of the code you used above in another CEWP, just place the new markdown in the other CEWP and keep all the javascript and styles in one or the other.

score 1 · Answer 2 · answered Oct 05 '15 at 17:36

You should be able to. You would need to copy your HTML structure, give it a unique id and then just initialize a new instance.

var deadline = 'October 31 2015 00:00:50';
initializeClock('clockdiv', deadline);
var deadline2 = 'November 01 2015 00:00:50';
initializeClock('clockdiv2', deadline2);

Danny '365CSI' Engelman · Answer 3 · 2017-05-01T07:54:00.827

You can save a whole lot of Script and HTML by using the SharePoint String.format function to format the counts

function countdown(id,endtime){
    var timer=setInterval(function () {
        t = endtime - new Date();
        if (t>0) {
          var HTML='<div><span class="days">{0:D2}</span><div class="smalltext">Days</div></div>';
          HTML+='<div><span class="hours">{1:HH}</span><div class="smalltext">Hrs.</div></div>';
          HTML+='<div><span class="minutes">{1:mm}</span><div class="smalltext">Min.</div></div>';
          HTML+='<div><span class="seconds">{1:ss}</span><div class="smalltext">Sec.</div></div>';
          document.getElementById(id).innerHTML = String.format(HTML , ~~(t/864e5) , new Date(t));
        } else {
          clearInterval(timer);
        }
    }, 1000);
    return(timer);
};
var timer1=countdown('pageTitle', new Date(2015,9,21));//Oct 21st 2015 = Back to the Future day
var timer2=countdown('clockDiv2', new Date(2016));//new year

Note

If you only want the number of days, SharePoint (sp.datetimutils.js) has a function available:

 var daysremaining = GetDaysAfterToday( new Date(2015,11,31) );//New Years eve

sp.datetimeutils.js is loaded on Form en View pages, but in CSR it might not be available yet as the page is still loading

iJS clock countdown

Help with Dual Javascript countdown clock

3 Answers3

Note

Linked

Related