Show a running clock in html object

Questions related to using nuBuilder Forte.

Show a running clock in html object

Unread postby oli » Thu Oct 07, 2021 11:56 pm

I have an issue with updating a value within a html object continously.
I want to show a clock (in a html object) which is updated every second after I pressed a specific button on the form.

Therefore I added following custom code to the button (onclick event):
Code: Select all
setTimeout(function(){
    var zeit;
    var stunden, minuten, sekunden;
    var StundenZahl, MinutenZahl, SekundenZahl;
    var heute;
    heute = new Date();
    StundenZahl = heute.getHours();
    MinutenZahl = heute.getMinutes();
    SekundenZahl = heute.getSeconds();
    stunden = StundenZahl+":";
    if (MinutenZahl < 10) {minuten = "0" + MinutenZahl + ":";}
          else {minuten = MinutenZahl + ":";}
     if (SekundenZahl < 10) {sekunden = "0" + SekundenZahl + " ";}
          else {sekunden = SekundenZahl + " ";}
     zeit = stunden + minuten + sekunden + " Uhr";     
     document.getElementById('div_time').innerHTML = zeit;       // write the current time into the DIV of the html object on the form
},1000);


The correct time is visible in the DIV of my HTML object - but unfortunately only once (and static) and it never will be updated.
I think I'm doing something fundamentally wrong here and hope that someone could help me out please.

Thanks and best regards,
Oli
oli
 
Posts: 84
Joined: Sat Mar 20, 2021 11:52 pm
nuBuilder Version: 4.5

Re: Show a running clock in html object

Unread postby kev1n » Fri Oct 08, 2021 12:20 am

Use setInterval():

Code: Select all
function updateClock() {
      let currentDate = new Date();
      time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
      document.getElementById("div_time").innerHTML = time + ' Uhr';    
    }
   
setInterval(updateClock, 1000);
kev1n
nuBuilder Team
 
Posts: 2050
Joined: Mon Oct 15, 2018 2:13 am
nuBuilder Version: 4.5

Re: Show a running clock in html object

Unread postby oli » Fri Oct 08, 2021 9:35 pm

Thanks kev1n!
This is working great.

I just have one more issue.
Since some variables are counting the time within my function to calculate the current amount of money I'm facing another issue now.

When I pressed the button to start the calculation the 1st time - all works fine and the calculated amount of money will be showed correctly.
If I stop the calculation and start it again the values are switching and it seems the previous values of all variables will used together with the new ones (like the function is running twice).
Only if I restart the browser (or refresh it) it works as expected (until I don't start it again).
I hope I could explain the issue.
Please find below the complete code of the function
Code: Select all
function updateClock() {
    if($('#tas_running').prop('checked') === true){     
      let timestamp = Date.now();
      let time = timestamp - inittime; //currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
      let time_dif_hrs = Math.floor(time / 1000 / 60 / 60);   
      let betrag_running = ((time / 1000 / 60 / 60) * parseFloat(costrate)) + parseFloat(betrag);
      betrag_running = betrag_running.toFixed(2);
      // calc minutes
      if(time_dif_hrs > 0){
        time_dif_min = Math.floor((time / 1000 / 60) - (time_dif_hrs * 60));
      }else{
        time_dif_min = Math.floor(time / 1000 / 60);  // Minuten Differenz
        // nuMessage(time_dif_hrs + ' - ' + time_dif_min);
      }
      // calc seconds
      let time_dif_sec = 0;
      if(time_dif_hrs > 0 && time_dif_min > 0){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_min * 60) - (time_dif_hrs * 3600));   
      }else if(time_dif_hrs < 1 && time_dif_min > 0){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_min * 60));         
      }else if(time_dif_hrs > 0 && time_dif_min < 1){
        time_dif_sec = Math.floor((time / 1000) - (time_dif_hrs * 3660));           
      }else if(time_dif_hrs < 1 && time_dif_min < 1){
        time_dif_sec = Math.floor((time / 1000)); 
      }
      // document.getElementById("div_time").innerHTML = Math.floor(time_dif_min) + ' - Time =' + Math.floor(time / 1000);
      document.getElementById("div_time").innerHTML = 'Zeit: ' + Math.floor(time_dif_hrs) + ':' + Math.floor(time_dif_min) + ':' + Math.floor(time_dif_sec);
      document.getElementById('div_betrag').innerHTML = 'Gesamtbetrag: ' + betrag_running + '€';
    }
}
setInterval(updateClock, 1000);
oli
 
Posts: 84
Joined: Sat Mar 20, 2021 11:52 pm
nuBuilder Version: 4.5


Return to General

Who is online

Users browsing this forum: No registered users and 10 guests