Monday, August 31, 2020

Timer or Timer Control in JavaScript with Start, Stop and Pause button

I gone through one of the Timer requirement in my project on case entity in D365 CRM, to achieve this we will use the below code in HTML web resource and then insert the web resource in entity form.

Below is the Image of this timer web resource.

Java Script code with HTML buttons:
<!DOCTYPE html>
<html>
<head>
<script>
var t;
var runningtime;
var sstime;
var tsec=0;
function startTime() {
  //document.getElementById('btnstop').disabled =false;
  //ocument.getElementById('btnpause').disabled =false;
  var d = new Date();
  var year=d.getYear();
  var month = d.getMonth();
  var day = d.getDay();
  var hours=d.getHours(); 
  var minutes=d.getMinutes(); 
  var seconds=d.getSeconds(); 
  var milliseconds=d.getMilliseconds();
  var today = new Date(year, month, day, hours, minutes, seconds, milliseconds);
      
  if(document.getElementById('sttime').innerHTML=='')
  {document.getElementById('sttime').innerHTML =today;
  sstime=today;}
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  runningtime=new Date(today);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;  
  t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
function calulatetime()
{
document.getElementById('sttime').innerHTML='';
var ttime= date_diff_inminutes(runningtime,sstime);
document.getElementById('totime').innerHTML =ttime;
tsec= date_diff_inseconds(runningtime,sstime) + tsec;
document.getElementById('tosec').innerHTML =tsec;
document.getElementById('btnpause').disabled =true;
//document.getElementById('btnstart').disabled =false;
document.getElementById('btnstop').disabled =true;
var tothour=document.getElementById('tosec').innerHTML/3600;
//var tothour=Math.floor(document.getElementById('tosec').innerHTML/3600);
//var tothour1=Math.ceil(document.getElementById('tosec').innerHTML/3600);
//alert("total hours spend " + tothour);
//alert("total hours spend " + tothour1);
alert("total hours spend " + tothour.toPrecision(6));
}

function calulatetimeinsec()
{
tsec= date_diff_inseconds(runningtime,sstime) + tsec;
document.getElementById('tosec').innerHTML =tsec;
document.getElementById('sttime').innerHTML='';
}

var date_diff_inseconds = function diff_seconds(dt2, dt1) 
 {
  var diff =(dt2.getTime() - dt1.getTime());  
  var seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  return seconds;  
 }
 
var date_diff_inminutes = function diff_minutes(dt2, dt1) 
 {
 var diff =(dt2.getTime() - dt1.getTime());
  /*var diff =(dt2.getTime() - dt1.getTime()) / 1000;
  diff /= 60;
  return Math.abs(Math.round(diff));  */
  
  
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  return days + "d " + hours + "h "  + minutes + "m " + seconds + "s ";
  
 }
 
var date_diff_indays = function(date1, date2) {
dt1 = new Date(date1);
alert(dt1);
dt2 = new Date(date2);
alert(dt2);
return Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate()) ) /(1000 * 60 * 60 * 24));
}
</script>
</head>

<body>
<button id="btnstart" onclick="startTime()">Start</button>
<button id="btnstop" onclick="clearTimeout(t);calulatetime();">Stop</button>
<button id="btnpause" onclick="clearTimeout(t);calulatetimeinsec();">Pause</button>
<div id="txt"></div>
<div id="sttime"></div>
<div id="totime"></div>
<div id="tosec"></div>

</body>
</html>




No comments:

Split the String values with a special character in MS Flow to convert this into Array

 Many times we have a requirement to prepare the Mailing address for some of the documents, suppose there are Address Line1, Address Line2, ...