CODEWITHSUNDEEP
javascripthtmlcss
Anbrey12
Anbrey12

Reputation: 23

need to animate numbers

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>

Upvotes: 2

Views: 80

Answers (2)

lukiejohn
lukiejohn

Reputation: 41

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

Upvotes: 0

imvain2
imvain2

Reputation: 15847

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>

Upvotes: 1

Related Questions