CODEWITHSUNDEEP
javascriptjquery
Jess Cauchi
Jess Cauchi

Reputation: 303

How to get Javascript clock to increment based on a button click

I have the following piece of JavaScript which currently displays a digital clock on my webpage. I am creating a web based interactive story which is based on a day in the office. Everytime the user clicks a button to proceed onto the next part of the story I want to increment the clock by 30 minutes. Currently the clock is just showing real time. Ideally it would need to start at 9:00 am for the story then increment as the user goes through.

I have absolutely no idea how to do this and am fairly new to JavaScript, hopefully someone can help!

function displayTime() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

    var meridiem = "am";  // Default is AM

    if (hours > 12) {
        hours = hours - 12; // Convert to 12-hour format
        meridiem = "PM"; // Keep track of the meridiem
    }

    if (hours === 0) {
        hours = 12;    
    }

    if(hours < 10) {

        hours = "0" + hours;
    }

    if(minutes < 10) {
        minutes = "0" + minutes;
    }        
    if(seconds < 10) {
        seconds = "0" + seconds;
    }

    var clockDiv = document.getElementById('clock');

    clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
}

displayTime();

setInterval(displayTime, 1000); });

Upvotes: 0

Views: 1729

Answers (5)

Carsten Massmann
Carsten Massmann

Reputation: 28196

Since you are using jQuery you can keep it simple:

function fmt2(v){return v<10?'0'+v:''+v;}
$(function(){
var t=new Date();t.setHours(9);t.setMinutes(0);t.setSeconds(0);
var offset=t.getTime() - new Date().getTime();
function displayTime(){
    var currentTime= new Date((new Date()).getTime()+offset);
    var hours = currentTime.getHours();
    var meridiem=hours>=12?"PM":"AM";
    hours=hours%12; 
    if (hours==0) hours=12;
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    $('#clock').text( fmt2(hours)+':'
                     +fmt2(minutes)+':'
                     +fmt2(seconds)+' '+meridiem);
}
$('#newtime').click(function(){offset+=60*30*1000;});
setInterval(displayTime,1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clock">09:00:00 AM</div>
<a id="newtime" href=#>add time</a>

I am working basically with the real time but there is an offset applied to it. The offset is calculated such, that the clock will always start at 9:00 AM.

Upvotes: 0

hampusohlsson
hampusohlsson

Reputation: 10219

To start at 09:00 o'clock, you could use

var d = new Date();
d.setHours(9);
d.setMinutes(0);
d.setSeconds(0);

Then, I would recommend using moment.js

function onClick() {
    d = moment(d).add(30, "minutes").toDate();
    var el = document.getElementById('clock');
    el.innerHTML = moment(d).format("HH:mm:ss");
}

You can also do it without moment.js

function pad(t) {
    return t < 10 ? "0" + t : t;
}

function onClick() {
    d.setMinutes(d.getMinutes() + 30);
    var h = d.getHours();
    var m = d.getMinutes();
    var s = d.getSeconds();
    var time = pad(h) + ":" + pad(m) + ":" + pad(s);
    document.getElementById("clock").innerHTML = time;
}

JSFiddle Demo (moment.js)

JSFiddle Demo (vanilla)

Upvotes: 1

Dave Salomon
Dave Salomon

Reputation: 3297

I'm gonna throw my hat in the ring here too.

var date = new Date();   // create a new Date object
date.setHours(9);        // set it to 09:00:00
date.setMinutes(0);
date.setSeconds(0);

setInterval(function(){    // loop...
    date.setSeconds(date.getSeconds()+1);   // increment the seconds by 1
    var str = '';                           // build up a formatted string from the Date object
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    str += h.toString().length==1 ? '0' : '';   // if we have a single digit, prepend with a '0'
    str += h;
    str += ':'
    str += m.toString().length==1 ? '0' : '';   // and again
    str += m;
    str += ':'
    str += s.toString().length==1 ? '0' : '';   // and again
    str += s;

    $('#time').html(str);                       // set the element with ID 'time' to contain the string we just built
}, 1000); // ... every second

$('#increment').click(function(){      // when i click the element with id 'increment'
    date.setMinutes(date.getMinutes()+30);   // add 30 minutes to our Date object
});

Note that you will need to include jQuery on your page. You can do that with the following snippet:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Upvotes: 0

Su4p
Su4p

Reputation: 865

Hi here is another one try here http://jsfiddle.net/Ltq9dhaw/ :

    var time = new Date();
    time.setHours(9);
    time.setMinutes(0);
    time.setSeconds(0);
function displayTime() {

    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();

    var meridiem = "am";  // Default is AM

    if (hours > 12) {
        hours = hours - 12; // Convert to 12-hour format
        meridiem = "PM"; // Keep track of the meridiem
    }

    if (hours === 0) {
        hours = 12;    
    }

    if(hours < 10) {

        hours = "0" + hours;
    }

    if(minutes < 10) {
        minutes = "0" + minutes;
    }        
    if(seconds < 10) {
        seconds = "0" + seconds;
    }

    var clockDiv = document.getElementById('clock');

    clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
}
document.querySelector('#add').addEventListener('click',function(){
    var minutes = 30;
    time =  new Date(time.getTime() + minutes*60000);
    displayTime();
});
displayTime();

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

Working code (jquery), but you need to modify it according to your needs,

 function displayTime(currentTime, hours, minutes, seconds) {


   var meridiem = "am"; // Default is AM

   if (hours > 12) {
     hours = hours - 12; // Convert to 12-hour format
     meridiem = "PM"; // Keep track of the meridiem
   }

   if (hours === 0) {
     hours = 12;
   }

   if (hours < 10) {

     hours = "0" + hours;
   }

   if (minutes < 10) {
     minutes = "0" + minutes;
   }
   if (seconds < 10) {
     seconds = "0" + seconds;
   }

   $('#clock').text(hours + ":" + minutes + ":" + seconds + " " + meridiem);
 }

 $(function() {

   var currentTime = new Date();
   var hours = currentTime.getHours();
   var minutes = currentTime.getMinutes();
   var seconds = currentTime.getSeconds();

   displayTime(currentTime, hours, minutes, seconds);

   $('#increment30').on('click', function() {
     currentTime.setMinutes(currentTime.getMinutes() + 30);
     var hours = currentTime.getHours();
     var minutes = currentTime.getMinutes();
     var seconds = currentTime.getSeconds();
     displayTime(currentTime, hours, minutes, seconds);

   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='clock'>sss</div>
<button  id='increment30'>INCREMENT 30</button>

Upvotes: 0

Related Questions