Progress bar CONTROL

259
02 июня 2018, 21:00

Есть готовый прогресс бар . Кто знает как с горизонтального можно сделать вертикальный и + сделать рандомный ввод чисел с интервалом в 5 секунд . Помогите пожалуйста , вопрос жизни и смерти , мозг просто уже кипит ( 

$(document).ready(function () { 
    $('#myButton').click(function () { 
        animateProgressBar($('#ddlPercentage').val()); 
    }); 
 
    function animateProgressBar(percentageCompleted) { 
        $('#innerDiv').animate({ 
            width: (500 * percentageCompleted) / 100 
        }, 1000); 
 
        $({ counter: 1 }).animate({ counter: percentageCompleted }, { 
            duration: 1000, 
            step: function () { 
                $('#innerDiv').text(Math.ceil(this.counter) + '%'); 
            } 
        }) 
    } 
});
        <html> 
     <head> 
    <script  
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">  
        </script> 
 </head> 
   <body style="font-family:Arial"> 
           Select Percentage : 
          <select id="ddlPercentage"> 
        <option value="10">10</option> 
        <option value="20">20</option> 
        <option value="30">30</option> 
        <option value="40">40</option> 
        <option value="50">50</option> 
        <option value="60">60</option> 
        <option value="70">70</option> 
        <option value="80">80</option> 
        <option value="90">90</option> 
        <option value="100">100</option> 
    </select> 
    <input type="button" id="myButton" value="Start Animation" /> 
    <br /><br /> 
    <div id="outerDiv" style="background-color:#EEEEEE; 
         height:20px; width:500px; padding:5px"> 
        <div id="innerDiv" style="background-color:red; height:19px; 
             width:0px; color:white; text-align:center"> 
        </div> 
        </div> 
      </body> 
      </html>

Answer 1

$(document).ready(function () { 
    const fullRange = $('#outerDiv').height(); 
    $('#myButton').click(function () { 
        animateProgressBar($('#ddlPercentage').val()); 
    }); 
 
    function animateProgressBar(percentageCompleted) { 
        $('#innerDiv').animate({ 
            height: fullRange * percentageCompleted / 100, 
            marginTop: fullRange * ( 1 - percentageCompleted / 100)  
        }, 1000); 
 
        $({ counter: 1 }).animate({ counter: percentageCompleted }, { 
            duration: 1000, 
            step: function () { 
                $('#innerDiv').text(Math.ceil(this.counter) + '%'); 
            } 
        }) 
    } 
    setInterval(() => animateProgressBar(Math.floor(Math.random()*100)), 5000) 
 
});
        <html> 
     <head> 
    <script  
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">  
        </script> 
 </head> 
   <body style="font-family:Arial"> 
           Select Percentage : 
          <select id="ddlPercentage"> 
        <option value="10">10</option> 
        <option value="20">20</option> 
        <option value="30">30</option> 
        <option value="40">40</option> 
        <option value="50">50</option> 
        <option value="60">60</option> 
        <option value="70">70</option> 
        <option value="80">80</option> 
        <option value="90">90</option> 
        <option value="100">100</option> 
    </select> 
    <input type="button" id="myButton" value="Start Animation" /> 
    <br /><br /> 
    <div id="outerDiv" style="background-color:#EEEEEE; 
         width:20px; height: 500px; padding:5px"> 
        <div id="innerDiv" style="background-color:red; width:19px; height:0px; color:white; text-align:center; margin-top: 500px;"> 
        </div> 
        </div> 
      </body> 
      </html>

READ ALSO
Строки, split . амперсанд
javascript

Строки, split . амперсанд

Имеется строка:

 245
Передача данных одного класса в другой
Java

Передача данных одного класса в другой

Есть класс с set и get методы, есть 2й класс который записывает данные через set (например setTitle("title");), есть еще 3й класс который должен заполучить...

 208
Обработка нажатия в модальном окне
Java

Обработка нажатия в модальном окне

Всем доброго дняВозникла проблема

 241
JSON массив в виде строки в byte[]
Java

JSON массив в виде строки в byte[]

Подскажите может есть более лучший способ перегнать такое "[1,2,3,4,5,6,7,8,

 259