need to animate numbers

Question

I want to animate numbers in this way. After click on button start, I need that numbers change from 0 to the final value. In addition, after pressing the “Stop” button, it is necessary to return the values to zero. This is my physics project, and after clicking on the button in the window, a video demonstration of the process will start. And for this, I need to, after pressing the button, the numbers in a few seconds (5-10) increase to the desired value. I`m new in programing so thanks for your answer)

function hideLayer(ObHide) {
  document.getElementById(ObHide).style.visibility = "hidden";
}

function showLayer(ObShow) {
  document.getElementById(ObShow).style.visibility = "visible";
}
// Master function, encapsulates all functions
function init() {
  var video1 = document.getElementById("Video1");
  var video2 = document.getElementById("Video2");
  if (video1.canPlayType && video2.canPlayType) {
    document.getElementById("play").addEventListener("click", vidplay1, false);
    document.getElementById("stop").addEventListener("click", vidplay2, false);


    function vidplay1(evt) {
      button = evt.target; //  get the button id to swap the text based on the state                                    
      if (video1.paused) { // play the file, and display pause symbol
        video1.play();
        video2.pause();
        button.textContent = "START";
      }
    }

    function vidplay2(evt) {
      button = evt.target; //  get the button id to swap the text based on the state                                    
      if (video2.paused) { // play the file, and display pause symbol
        video2.play();
        video1.pause();
      }
    }


  } // end of runtime
}

*{
 padding: 0;
 margin: 0;
}
html{
 height:300px;
}
body{
 height:600px;
 padding: 0;
 margin: 0;
}

.wrapper{
 min-height: 100%;
 height: auto;
 margin: -50px auto 0;
 width: 100%;
 }

.header{
 height: 50px;
 background-color: #2f4f4f;
 padding-top: 50px;


}
.content{
 margin: 3%;
 width :60%;
 height: auto; 

}
.clear{
 min-height: 50px;
 width: 100%;

}
.clear2{
 min-height: 35px;
 width: 100%;

}

h2{
 margin: 0.5%;
 color: #fff;
}
#Video1{  
 width: 83.35%;
 height: auto;

  background-size: cover;
  border: 2px solid;
  float: inherit;
   position:relative; 
}
#Video2{
 width: 50%;

height: auto; 
  background-size: cover;
  border: 2px solid;
  float:inherit;
  position: absolute; bottom: 5; right: 10;

}

.footer{
 
 height: 50px;
  background-color: #2f4f4f;
  margin:auto 0;
}

.table{

 font-size: 120%;
 margin-left: 58%;
 margin-top: -39.5%;
 margin-bottom: 25%;
 text-align: center
}

table{

 width: 40%;
 height:auto;
}

.b-play{

 margin-left: 92%;
   margin-top: -100%; 
   float: inherit;
}

#play{

  width: 20%;
  height: auto;
  background: #229b24;
  text-align: center;
  font-size: 250%;
  font-family: 'Pacifico', cursive;
  color: #fff ;
  
}
.b-stop{
margin-left: 92%;
 float: inherit;
 
 


}

#stop{

 
  width: 20%;
  height: auto;
  background:red ;
  text-align: center;
  font-size: 250%;
  font-family: 'Pacifico', cursive;
  color: #fff ;
  
}
 
.main-reg{

 width:250px;
 height: auto;
 margin-top: -22%;
 float: inherit;
}
.reg{
 width: 200px;
 height: 200px;
 border: 3px solid;
 border-radius: 50%;
 margin-left: 75%;
}

nav {
  text-align: center;
  padding: 40px 0 0;
  margin-left: 105%;
  margin-top: -33%;
  float: inherit;
 
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  display: block;
  color:white;
}

td{
 height:250px;
}
th{
 text-align: center;
 padding-left:  0.5%;
 padding-right: 0.5%;
}
nav {
  text-align: center;
  padding: 40px 0 0;
 
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  display: block;
  color:white;
}

.down{
  color: tomato;
 
}
.but1 {
 margin-left:-320%;
 font-size: 150%;
 width: 30px;
 
}
.but2{
 font-size: 150%;
 margin-left:-150%;
 width: 30px;
}
.but3{
 font-size: 150%;
 margin-left: -60%;
 width: 30px;
}
.but4{
 font-size: 150%;
 margin-left: -30%;
 width: 30px;
}
.but5{
 font-size: 150%;
 margin-left: -20%;
 width: 30px;
}
.but6{
 font-size: 150%;
 width: 30px;
 margin-left: -30%; 
}
.but7{
 font-size: 150%;
 width: 30px;
 margin-left: -50%; 
}
.but8{
 font-size: 150%; 
  width: 30px;
 margin-left: -120%; 
}
.but9{
 font-size: 150%;
 width: 30px;
 margin-left: -240%;  
}
.topmenu{
 margin-top: -12%;
 margin-left: 15%;
}

.topmenu > li {
  display: inline-block;
  position: relative;
}

.topmenu > li > a {
  position: relative;
  padding: 10px 15px;
  font-family: 'Pacifico', cursive;
  line-height: 1;
  letter-spacing: 3px;
}

.topmenu > li > div > a:before  {

  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 100%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: tomato;
  transform: translate(-500%, 10px);
  opacity: 0;
  transition: 0.01s;

}
.but1 a:before  {
 margin-left: -140%;
 margin-top: 22%;
}
.but2 a:before  {
 margin-left: -15%;
 margin-top: 7%;
}
.but3 a:before  {
 margin-left: 30%;
 margin-top: -20%;
}
.but4 a:before  {
 margin-left: 60%;
 margin-top: -35%;
}
.but5 a:before  {
 margin-left: 70%;
 margin-top: -50%;
}
.but6 a:before  {
 margin-left: 60%;
 margin-top: -65%;
}
.but7 a:before  {
 margin-left:30%;
 margin-top: -90%;
}
.but8 a:before  {
 margin-top: -130%;
}
.but9 a:before  {
 margin-left: -80%;
 margin-top: -170%;
}

.topmenu li > div:hover a:before {
  transform: translate(-450%, 0);
  opacity: 100;
}

.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8"/>
          <title> PHISIC</title>
            

</head>
<body  onload="init()"> 
<div class="wrapper">
    <div class="header"><h2>Phisic Model</h2></div>

<div class="content">

<!-- <video id="Video1" style="border: 1px solid blue;" height="624" width="880" src="vid2.mp4">      

</video> -->

<div ><video  id="Video2" style="border: 1px solid blue;" height="624" width="880" src="vid.mp4"  type="video/mp4">      

</video></div>

<div id="Layer1" ><video id="Video1" style="border: 1px solid blue;"><source src="vid2.mp4" type="video/mp4"></video></div>
<div id="buttonbar" style="display: none;">
    
       
    
</div>
<!-- <div id="buttonbar" style="display: none;">
    
       
    
</div> -->
  <input class="b-play" id="play" type="button" name="ly1" value="START" onClick="showLayer('Layer1')">
      
   <!--     <div class="b-play"><button id="play" >START</button></div><br> -->

      
 <input class="b-stop" id="stop" type="button" name="ly1"  value="STOP" onClick="hideLayer('Layer1')">
      <!--  <div class="b-stop"><button id="stop" >STOP</button></div> -->
</div >
   <table  class="table" border="1">
       
   <caption>Таблица значений</caption>
   <tr>
    <th>Угол, Град</th>
    <th>Скорость рамки, об/м</th>
    <th>Скорость рамки, об/с</th>
    <th>Момент инерции, кг*м^2</th>

    
   </tr>
   <tr><td>0</td><td>470</td><td>7,826</td><td>0,003578</td></tr>
   
     </table>
        
    <!--  <input class="b-play" id="play" type="button" name="" value="START">
       -->
   <!--    <div class="b-play"><button id="play" >START</button></div><br> -->

      
 <!-- <input class="b-stop" id="stop" type="button" name="ly1"  value="STOP" onClick="hideLayer('Layer1')"> -->
      <!--  <div class="b-stop"><button id="stop" >STOP</button></div> -->

     <div  class="main-reg"></div>
     <div class="reg"><nav>
         <ul class="topmenu">
            <li><div class="but1"><a href=""  class="down">0</a></div></li></br>

            <li><div class="but2"><a href="" class="down">5</a></div></li></br>

            <li><div class="but3"><a href="" class="down">10</a></div></li></br>

            <li><div class="but4"><a href="" class="down">15</a></div></li></br>

            <li><div  class="but5"><a href="" class="down">20</a></div></li></br>

            <li><div class="but6"><a href="" class="down">25</a></div></li></br>

            <li><div class="but7"><a href="" class="down">30</a></div></li></br>

            <li><div class="but8"><a href="" class="down">35</a></div></li></br>

            <li><div class="but9"><a href="" class="down">40</a></div></li></br>

        </ul>   
    </nav></div>
<div class="clear2"></div><br>
<!-- <div class="clear2"></div><br> -->
    <div class="footer"></div>
</div></body></html>

Does this answer your question? [plain count up timer in javascript](https://stackoverflow.com/questions/5517597/plain-count-up-timer-in-javascript) — Heretic Monkey, Jun 15 '20 at 20:18

score 1 · Answer 1 · answered Jun 15 '20 at 19:44

Here is a counter function that will show a timer. It allows you to set the max value, the timer delay in miliseconds.

var _max = 10;
var _delay = 500; //miliseconds
var _timer;
var _action = "stopped";
var cur = 0;
var btn = document.querySelector(".btn-action");
var counter = document.querySelector("#counter");

function show_numbers() {
  counter.innerHTML = cur;

  if (cur == _max) {
    clearTimeout(_timer);
    _action = "stopped";
    cur = 0;
    btn.innerHTML = "Start";
  } else {
    cur++;
    setTimeout(show_numbers, _delay);
  }
}

btn.addEventListener("click", function() {
  if (_action == "stopped") {
    _action = "start";
    btn.innerHTML = "Stop";
    _timer = setTimeout(show_numbers, _delay);
  }
});

<button type="button" class="btn-action">Start</button>
<div id="counter"></div>

It is interesting answer, but i dont underastend how to put this code and use with numbers in the table — Anbrey12, Jun 15 '20 at 21:18

score 0 · Answer 2 · answered Jun 15 '20 at 20:15

Not sure how you want to display the number but this counter will just put it in your heading as a test:

var increment = 1; //Increase number by?
var speed = 100; //Time between each increment?
var numberDiv = ".header"; //Don't know where you want the number to show?
var currentNum = 0;
var numInterval = null;
var numStopping = false;
function startCounting() {

  if (numInterval) {//Already counting so just make sure interval isn't stopping

    numStopping = false;

  } else {//Set interval to start counting

    numInterval = setInterval(animateNums, speed);
  }
}
function stopCounting() {

  //Set flag for interval to start counting backwards
  numStopping = true;
}
function animateNums() {

  if (numStopping) { //Number decreasing

    currentNum -= increment;

  } else { //Number increasing

    currentNum += increment;
  }

  //Set content of div to new number value
  document.querySelector(numberDiv).innerHTML = currentNum;

  if (currentNum == 0) { //Reset

    clearInterval(numInterval);
    numInterval = null;
    numStopping = false;
  }
}

function hideLayer(ObHide) {
  stopCounting();
  document.getElementById(ObHide).style.visibility = "hidden";
}

function showLayer(ObShow) {
  startCounting();
  document.getElementById(ObShow).style.visibility = "visible";
}

need to animate numbers

2 Answers2