Получение X Y позиции мыши в процентах

Question

Подскажите, как отредактировать этот код так - чтоб показывало не только округленный процент но и остаток, т.е допустим c 10% до 11% показывало 10.1%, 10.2% и т.д.

const container = document.querySelector("body");
let posXDisplay = document.getElementById("posX");
let posYDisplay = document.getElementById("posY");


container.addEventListener("mousemove", (e)=> {
  xPercent = parseInt(e.pageX / window.innerWidth * 100);
  yPercent = parseInt(e.pageY / window.innerHeight * 100);
  posXDisplay.innerText = xPercent;
  posYDisplay.innerText = yPercent;
});

body {
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #111;
  font-weight: bold;
  font-family: arial;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  text-align: center;
  color: white;
}

<div>
  Position X: <span id="posX">NaN</span>%<br/>
  Position Y: <span id="posY">NaN</span>%
</div>

Answer 1

Убираем parseInt() - он округляет до целого числа
Вычисляем процент (e.pageX / window.innerWidth) * 100
Оставляем два знака после запятой, с помощью toFixed(2)

const container = document.querySelector("body");
let posXDisplay = document.getElementById("posX");
let posYDisplay = document.getElementById("posY");


container.addEventListener("mousemove", (e)=> {
  xPercent = ((e.pageX / window.innerWidth) * 100).toFixed(2);
  yPercent = ((e.pageY / window.innerHeight) * 100).toFixed(2);
  posXDisplay.innerText = xPercent;
  posYDisplay.innerText = yPercent;
});

body {
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: #111;
  font-weight: bold;
  font-family: arial;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  text-align: center;
  color: white;
}

<div>
  Position X: <span id="posX">NaN</span>%<br/>
  Position Y: <span id="posY">NaN</span>%
</div>

Результат:

БЛОГ НА HUSL

Получение X Y позиции мыши в процентах

Ответы (1 шт):