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

i have following piece of javascript displays digital clock on webpage. creating web based interactive story based on day in office. everytime user clicks button proceed onto next part of story want increment clock 30 minutes. clock showing real time. ideally need start @ 9:00 story increment user goes through.

i have absolutely no idea how , new javascript, can help!

function displaytime() {     var currenttime = new date();     var hours = currenttime.gethours();     var minutes = currenttime.getminutes();     var seconds = currenttime.getseconds();      var meridiem = "am";  // default      if (hours > 12) {         hours = hours - 12; // convert 12-hour format         meridiem = "pm"; // keep track of 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); }); 

to start @ 09:00 o'clock, use

var d = new date(); d.sethours(9); d.setminutes(0); d.setseconds(0); 

then, 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 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)