Форум

Dilettante_Pro · #21 (**permalink**) 07.12.2016, 18:45

без дивов

<style>
  td { position:relative;
        width:20px;
        height:10px;
        padding: 0px;
  }
 
</style>
Процент<input type='text'/>
<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * (percent - 5)) / 100) ;i++) {
     arr[i].style.backgroundColor = "red";
  }
}
</script>

Sergey and · #22 (**permalink**) 07.12.2016, 19:02

Можно сделать непрерывный progressbar? В этом коде получается кубиками с шагом 10% , а можно как-то сделать непрерывный с шагом 1% ?

рони · #23 (**permalink**) 07.12.2016, 19:04

Sergey and,
зачем вам таблица, может хватит одного div?

Sergey and · #24 (**permalink**) 07.12.2016, 19:09

На странице нужно будет 8 таких баров поместить, что-то типа музыкального индикатора. Как их ровно разместить без таблицы ? http://avtozvuk-info.ru/wp-content/u...ekvalayzer.jpg

Dilettante_Pro · #25 (**permalink**) 07.12.2016, 19:22

Sergey and,
А если по принципу пост 14, только двигать вертикально?
Тогда одна строка таблицы с 8 ячейками. Менять не ширину, а высоту дивов

Sergey and · #26 (**permalink**) 07.12.2016, 19:27

Сейчас возникла мысль если в колонке поместить DIV с красным фоном и менять его высоту от 0 до 100, так получиться?

рони · #27 (**permalink**) 07.12.2016, 20:01

Sergey and,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
    display: flex;
     width: 400px;
     height: 200px;
  }
  .slider > div{
    border: 1px #7CFC00 solid;
    flex: 1;
    background-color: #FF0000;
    margin: 2px;
    background-repeat: no-repeat;
    transition: all 1.4s ease-in-out;

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
     var d = $(".slider > div");
    function f()
    {
      var el = d[Math.random()*d.length|0],
      gradient = Math.random()*100|0 ;
      $(el).css({"background-image" : "linear-gradient(#103810 "+gradient+"%, transparent "+gradient+"%)"});
      window.setTimeout(f,200)
    }
    f()
});
  </script>
</head>

<body>
<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>

</body>
</html>

Sergey and · #28 (**permalink**) 07.12.2016, 20:37

Спасибо.

Как раз такое нужно было .

Sergey and · #29 (**permalink**) 08.12.2016, 10:28

Долго разбирался, но теперь понял как работает код. Спасибо.
подскажите пожалуйста еще. Сам скорее всего не придумаю как сделать.
Хотелось бы еще на каждый эквалайзер вставить еще один прямоугольник. Прямоугольник разделен на два в центре зеленая линия 4px. эта линия появляется если задать 50% в центре. Верхний и нижний от линии квадратики зеленные и полупрозрачные, что-бы было видно за ними красную линию которую уже сделали. Можно один div закрасить тремя цветами ? Если у кого были магнитофоны не с круглой регулировкой а с бегуном?, бегунок хочу сделать.

Код:

___
|  |
|__|
|__| бегунок- центральная линия 4px верхний и нижний от нее квадр. полупрозрачные. двигать его не мышкой а из скрипта
|__|
|  |
|__|

рони · #30 (**permalink**) 08.12.2016, 11:04

Sergey and,
тут нужен специалист по css ...

Форум

Справочник

Discord чат

Курсы javascript