1

Подскажите, как отредактировать этот код так - чтоб показывало не только округленный процент но и остаток, т.е допустим 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>

1 ответ 1

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

Результат:

введите сюда описание изображения

2
  • Благодарю! Очень помогли
    – Ximroy
    Commented 23 авг. 2022 в 11:06
  • 1
    @Ximroy, стараемся).. За плюсик спасибо, но проще галочку поставить, чтобы вопрос не валялся в неотвеченных и не отвлекал внимание у других пользователей. см: Что делать с ответами на мой вопрос? Commented 23 авг. 2022 в 11:10

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.