Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2018, 16:19
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Как перевести пиксели в проценты
Добрый день. У меня есть два блока, у одного ширина конкретно задана, у второго меняется в зависимости от значения. Выглядит это так:
<div id="data">130</div>
<div id="data1">шкала</div>
<script type="text/javascript">
var data = document.getElementById('data');
var data1 = document.getElementById('data1');
data.style.border = "1px solid rgba(54,162,235,1)";
data.style.width = 30+ "%";
data1.style.background = "rgba(54,162,235,0.2)";
data1.style.width = data.innerHTML +"px";
</script>

Так вот шкала у меня в пикселях, она при максимальном значений не должна превышать значения бордера. Которая в данный момент 30%.
Как переконвертировать значение в проценты? Я хочу написать :
data1.style.width = data.innerHTML +"%";

Но в данный момент это уже 130%, нужно чтобы не превышало заданный бордер в 30%.
Например 0% = 0, а 30% будет равнятся значению 400 или 500 или 1000? Тоесть конец шкалы я тоже сам задаю.
На совсем наверное понятно, но как то так.
Ответить с цитированием
  #2 (permalink)  
Старый 25.04.2018, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

подожду решения, чтобы понять, что хочет тс ...
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2018, 16:55
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

рони,
Ну вот например значение стало 730. Это равно 730 px, то есть уже больше 30% бордера, а надо чтоб он в пределах бордера плавал, хочу установить значение 30% например равно 1000, 0% соотвественно 0.
<div id="data">730</div>
<div id="data1">шкала</div>
<script type="text/javascript">
var data = document.getElementById('data');
var data1 = document.getElementById('data1');
data.style.border = "1px solid rgba(54,162,235,1)";
data.style.width = 30+ "%";
data1.style.background = "rgba(54,162,235,0.2)";
data1.style.width = data.innerHTML +"px";
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 25.04.2018, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Artur_Hopf,
ок, попробую
Ответить с цитированием
  #5 (permalink)  
Старый 25.04.2018, 17:04
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,735

Artur_Hopf, вы случаем не progress bar пытаетесь свелосипедить?
Ответить с цитированием
  #6 (permalink)  
Старый 25.04.2018, 17:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Artur_Hopf,
так?
<div id="data">730</div>
<div id="data1">шкала</div>
<script type="text/javascript">
var data = document.getElementById('data');
var data1 = document.getElementById('data1');
data.style.border = "1px solid rgba(54,162,235,1)";
data.style.width = 30 + "%";
data1.style.background = "rgba(54,162,235,0.2)";
data1.style.width = (30 *  data.innerHTML / 1000)  +"%";
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 26.04.2018, 07:57
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

рони,
Да, спасибо
Nexus,
Не совсем, скорее градусник с плавающей шкалой
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как перевести код JavaScript с комментариями и другим в production версию? и наоборот michailV Общие вопросы Javascript 3 21.03.2014 13:50
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
object.scale.x как перевести на русский язык avrudoi Элементы интерфейса 7 15.01.2014 00:19
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
как перевести дату чтоб выполнить отбор в MYSql ?? Arfey Серверные языки и технологии 7 10.06.2010 09:23