Проблема с анимацией увеличения значения чисел от 0 до нужного значения с десятичной частью - PullRequest
Новая
       0

Проблема с анимацией увеличения значения чисел от 0 до нужного значения с десятичной частью

0 голосов
/ 16 июня 2020

пожалуйста, помогите мне понять, как это сделать. Это сайт физического проекта. При нажатии на кнопку в окне запускается демонстрация физического процесса, а в таблице нужные мне значения увеличиваются с 0 до определенного числа. Они помогли мне с этим кодом, но мне не хватает того, чтобы мои значения были десятичными, а анимация значений была только целыми числами. Я совершенно новичок в этом, но мне это нужно сейчас, что удручает, пожалуйста, помогите. 

function start() {
 let div = document.querySelectorAll(".count");

 // Взять элемент, анимировать до 2000 за 2 секунды
 animate({elem: div[0], to: 7.51, sec: 5});
 animate({elem: div[1], to: 34, sec: 10});
 animate({elem: div[2], to: 0.003578, sec: 5});

 /***/
 function animate({elem, from = 0, to, sec}) { // Называется "деструктуризация"
   let tick = (to - from) / (60 * sec);
   // 60 - это 60 кадров в секунду, от requestAnimationFrame
  
   loop();
   function loop() {
     elem.textContent = Math.round( from += tick );
    
     if( from >= to ) {
       // Прервать, как только дойдет до конца.
       elem.textContent = to;
       return;
     }
    
     requestAnimationFrame(loop);
   }
 }
}
function stop() {
 let div = document.querySelectorAll(".count");

 // Взять элемент, анимировать до 0 за 2 секунды
 animate({elem: div[0], from: 7.51, sec: 5});
 animate({elem: div[1], from: 34, sec: 20});
 animate({elem: div[2], from: 0.003578, sec: 5});

 /***/
 function animate({elem, from, to = 0, sec}) { // Называется "деструктуризация"
   let tick = (to - from) / (60 * sec);
   // 60 - это 60 кадров в секунду, от requestAnimationFrame
  
   loop();
   function loop() {
     elem.textContent = Math.round( from += tick );
    
     if( from <= to ) {
       // Прервать, как только дойдет до конца.
       elem.textContent = to;
       return;
     }
    
     requestAnimationFrame(loop);
   }
 }
}

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);
}
#counter{
  width: 70%;
  height: auto;
}
<!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'); 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="stop(); 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><div class="count"></div></td><td><div class="count"></div></td><td><div class="count"></td></tr>
  	
     </table>
        <div id="counter"></div>
    <!--  <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...