без дивов
<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>
|
Можно сделать непрерывный progressbar? В этом коде получается кубиками с шагом 10% , а можно как-то сделать непрерывный с шагом 1% ?
|
Sergey and,
зачем вам таблица, может хватит одного div? |
На странице нужно будет 8 таких баров поместить, что-то типа музыкального индикатора. Как их ровно разместить без таблицы ? http://avtozvuk-info.ru/wp-content/u...ekvalayzer.jpg
|
Sergey and,
А если по принципу пост 14, только двигать вертикально? Тогда одна строка таблицы с 8 ячейками. Менять не ширину, а высоту дивов |
Сейчас возникла мысль если в колонке поместить DIV с красным фоном и менять его высоту от 0 до 100, так получиться?
|
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>
|
Спасибо.:thanks:
Как раз такое нужно было . |
Долго разбирался, но теперь понял как работает код. Спасибо.
подскажите пожалуйста еще. Сам скорее всего не придумаю как сделать. Хотелось бы еще на каждый эквалайзер вставить еще один прямоугольник. Прямоугольник разделен на два в центре зеленая линия 4px. эта линия появляется если задать 50% в центре. Верхний и нижний от линии квадратики зеленные и полупрозрачные, что-бы было видно за ними красную линию которую уже сделали. Можно один div закрасить тремя цветами ? Если у кого были магнитофоны не с круглой регулировкой а с бегуном?, бегунок хочу сделать. Код:
___ |
Sergey and,
тут нужен специалист по css ... |
| Часовой пояс GMT +3, время: 08:43. |