Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Деление с остатком (https://javascript.ru/forum/misc/78814-delenie-s-ostatkom.html)

Foknik 08.11.2019 16:13

Деление с остатком
 
Добрый день уважаемые гуру js.
У меня такой вопрос.
есть пременная num1 равная целому числу и есть переменная равная дробному числу (нецелом) например 1.609

Подкажите как переменную num1 разделить на num2 чтобы вернулось фактическое число без округлений, тоесть дробное. (750/1,609 = 466,12)

рони 08.11.2019 16:58

Foknik,
<script>
alert((750/1.609*100|0)/100)
  </script>

Foknik 08.11.2019 17:42

Спасибо, а как сделать чтобы было без остатка?

Foknik 08.11.2019 17:51

Спасибо, а как сделать чтобы было без остатка?

Vlasenko Fedor 08.11.2019 17:55

(750/1.609)|0
(750/1.609).toFixed(0);
Math.floor(x)
Math.round(x)

рони 08.11.2019 17:57

Foknik,
убрать действия с 100

Foknik 09.11.2019 15:54

https://codepen.io/foknik/pen/wPWxRe

Вообщем как сделать чтобы блок двигался точно за ползунком?
Помоги плиз!

рони 09.11.2019 16:35

input range ползунок
 
Foknik,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .container {
  max-width: 1170px;
  margin: 0 auto;
}

.order-block {
  display: flex;
}

.order-block-item__1 {
  width: 100%;
  max-width: 466px;
}
.order-block-item__1 p {
  margin-bottom: 72px;
}

.range-block {
  position: relative;
}
.range-block_number {
  position: absolute;
  left: 32px;
  top: -54px;
  width: 55px;
  height: 24px;
  box-sizing: border-box;
  line-height: 24px;
  color: #fff;
  font-size: 14px;
  text-align: right;
  padding-right: 25px;
  background: #3399cc;
  border-radius: 4px;
  -webkit-transform: translateX(-52px);
          transform: translateX(-52px);
}
.range-block_number:before {
  content: "m2";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  width: 23px;
  height: 100%;
  text-align: right;
  padding-right: 5px;
}
.range-block_number:after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
  top: 100%;
  border-top: 10px solid #3399cc;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.range-block_range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0;
  height: 7px;
  outline: none;
  background: #ccc;
}

  </style>

</head>

<body>
<div class="container">
		<h2 class="order">Легкий способ заказать натяжной потолок в свою квартиру</h2>
		<div class="order-block">
			<div class="order-block-item__1">
				<p class="area">Общая площадь потолков ㎡</p>
				<div class="range-block">
					<div class="range-block_number">32</div>
					<input class="range-block_range range_area" type="range" min="32" max="750" value="32">
				</div>
			</div>
			<div class="order-block__item-2"></div>
			<div class="order-block__item-3"></div>
		</div>
	</div>
<script>
let range = document.querySelector('.range_area');
let range_number = document.querySelector('.range-block_number');
range.oninput = function() {
	range_number.style.transform =  `translateX(${(this.clientWidth - 12) *
(this.value - 32)/ (750 -32) - 52}px)` ;
	console.log(range_number);
	range_number.innerHTML = this.value;
}
</script>
</body>
</html>

Malleys 09.11.2019 17:06

рони, подсказка сдвигается в FF, нужно указать конкретные размеры.

Foknik, https://codepen.io/Malleys/pen/yLLERPg?editors=0010

рони 09.11.2019 18:18

Malleys,
ok!


Часовой пояс GMT +3, время: 15:28.