title: How do you average hours, minutes, seconds and milliseconds? E.g How do you divide a timestamp by an integer?
body: <p>Give a timestamp in the format of <code>hh:mm:ss.SSS</code>, how do you divide this timestamp by an integer and get a timestamp as the result?</p>
  
  <p>For example, given a timestamp of <code>00:03:00:090</code>, if I divide this by <code>3</code>, I would expect to get a timestamp of <code>00:01:00:030</code>.</p>
  
  <p>If I had a timestamp of <code>00:05:35:100</code> and divide it by <code>3</code>, I would expect <code>00:01:51:700</code> as a result. If I divided by <code>2</code>, I would expect <code>00:02:47:550</code> as a result.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>     $(window).on("load", function() {
            $('#Btn_Calculate_Average').click(function (e) { 
                 e.preventDefault();
                 
                 Average();
            });
  
           function Average(){
                 let in_Time = $('#in_Time').val();
                 let in_valueSelected = $('#in_valueSelected').val();
  
                 var Average = in_Time / in_valueSelected;
  
                 $('#in_Result').val(Average);
           }
            
       });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
                 &lt;div class="Dv"&gt;
                      &lt;label for="in_Time"&gt;Time&lt;/label&gt;
                      &lt;input type="text" id="in_Time" value="00:05:35:100" &gt;
                 &lt;/div&gt;
  
                 &lt;label  for="in_valueSelected"&gt;Divide By:&lt;/label&gt;
                 &lt;input   name="in_valueSelected" id="in_Média"  type="text" value="3" list="lsit_valueSelected"&gt;
                 &lt;datalist id="lsit_valueSelected"&gt;
                      &lt;option value="1"&gt;
                      &lt;option value="2"&gt;
                      &lt;option value="3"&gt;
                      &lt;option value="4"&gt;
                      &lt;option value="5"&gt;
                      &lt;option value="6"&gt;
                      &lt;option value="7"&gt;
                 &lt;/datalist&gt;
                
                 &lt;button id="Btn_Calculate_Average"&gt;Calculate Average&lt;/button&gt;
  
                 &lt;div class="Dv"&gt;
                      &lt;label for="in_Result"&gt;Media&lt;/label&gt;
                      &lt;input type="text" id="in_Result" value="" &gt;
                 &lt;/div&gt;
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong><em>Resolution</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).on("load", function () {
                 const toMilliseconds = (timestamp) =&gt; {
                      let [hours, minutes, seconds, milliseconds] = timestamp.split(':')
                      hours = +hours
                      minutes = +minutes
                      seconds = +seconds
                      milliseconds = +milliseconds
                      console.log(hours, minutes, seconds, milliseconds)
                      return (hours * 3.6e6) + (minutes * 60000) + (seconds * 1000) + milliseconds
                 }
                 const toTimestamp = (ms) =&gt; {
                      const hours = Math.floor(ms / 3.6e6)
                      ms = ms % 3.6e6
                      const minutes = Math.floor(ms / 60000)
                      ms = ms % 60000
                      const seconds = Math.floor(ms / 1000)
                      ms = ms % 1000
                      return `${hours}:${minutes}:${seconds}:${ms}`
                 }
                 // var in_Time = $('#in_Time').val();
                 // let in_valueSelected = $('#in_valueSelected').val();
                 $('#Btn_Calculate_Average').click(function (e) {
  
                      var ResultadoDaMedia =  toTimestamp(toMilliseconds($('#in_Time').val()) / $('#in_valueSelected').val())
  
                      $('#in_Result').val(ResultadoDaMedia)
                      console.log(ResultadoDaMedia)
                 })
                 // var DIVISER = 
                 // input.addEventListener('input', e =&gt; {
                 //           console.log(output.textContent = toTimestamp(toMilliseconds(input.value) / 2));
                 // }) 
            });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
       background-color: rgba(255, 255, 255, 1);
       margin: 0px; padding: 0px;
       height: 100vh; width: 100%;
       display: flex; flex-direction: column;
       align-items: center; justify-content: flex-start;
       overflow: scroll;
  }
  
  
  .container {
      background-color: rgb(255, 255, 255);
      margin: 5px; padding: 5px;
      min-height: 500px; width: 100%;
      max-height: 64px;
      display: flex; flex-direction: column;
      align-items:center; justify-content: flex-start;
      overflow: scroll;
  
  }
  .Dv {
      background-color: rgb(255, 255, 255);
      margin: 5px; padding:10px;
      height: auto; width: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden; 
  
  }
  
  
  
  label, button{
       margin: 4px;
  
  }
  
  input {
       margin: 4px;
       max-width: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
            &lt;div class="Dv"&gt;
                 &lt;label for="in_Time"&gt;Time&lt;/label&gt;
                 &lt;input type="text" id="in_Time" value="00:05:35:100"&gt;
            &lt;/div&gt;
  
            &lt;label for="in_valueSelected"&gt;Divide By:&lt;/label&gt;
            &lt;input name="in_valueSelected" id="in_valueSelected" type="text" list="lsit_valueSelected"&gt;
            &lt;datalist id="lsit_valueSelected"&gt;
                 &lt;option value="1"&gt;
                 &lt;option value="2"&gt;
                 &lt;option value="3"&gt;
                 &lt;option value="4"&gt;
                 &lt;option value="5"&gt;
                 &lt;option value="6"&gt;
                 &lt;option value="7"&gt;
            &lt;/datalist&gt;
  
            &lt;button id="Btn_Calculate_Average"&gt;Calculate Average&lt;/button&gt;
  
            &lt;div class="Dv"&gt;
                 &lt;label for="in_Result"&gt;Media&lt;/label&gt;
                 &lt;input type="text" id="in_Result" value=""&gt;
            &lt;/div&gt;
       &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>