Nov 20, 2022

# Solution 1 :

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);
}
}

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>``````

# Solution 2 :

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";
}
``````

# Problem :

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) {

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
}``````
``````*{
margin: 0;
}
html{
height:300px;
}
body{
height:600px;
margin: 0;
}

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

height: 50px;
background-color: #2f4f4f;

}
.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;
margin-left: 75%;
}

nav {
text-align: center;
margin-left: 105%;
margin-top: -33%;
float: inherit;

}

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

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

td{
height:250px;
}
th{
text-align: center;
}
nav {
text-align: center;

}

nav ul {
list-style: none;
margin: 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%;
}
margin-top: -12%;
margin-left: 15%;
}

display: inline-block;
position: relative;
}

.topmenu > li > a {
position: relative;
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;
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;
}

visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}``````
``````<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<title> PHISIC</title>

<div class="wrapper">

<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>
<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>``````

### Comment posted by Anbrey12

It is interesting answer, but i dont underastend how to put this code and use with numbers in the table

### Comment posted by Anbrey12

Could you say to me in detailse please