Остановить "покачивание" текста при обновлении

Я обновляю textContent в элементе, чтобы создать впечатление, что оценка увеличивается. Однако, когда я это делаю, все текстовое поле кажется «покачивающимся», поскольку оно кажется выровненным по центру. Я хочу использовать шрифт с переменной шириной поля. Вы можете увидеть это поведение, запустив команду ниже. Не стесняйтесь рекомендовать любые изменения стиля. Цель состоит в том, чтобы текст был закреплен, а не «покачивался».

var intervalID = window.setInterval(myCallback, 300, true, true);

function myCallback(effects, updateScore) {

  var elementId = Math.round(Math.random() * 10000);
  var elementName = "element" + elementId;
  var location = getLocation();
  var textAndScore = getTextAndScore();
  var elem = document.createElement("div");
  elem.style.position = "absolute";
  elem.style.left = location.left + "px";
  elem.style.top = location.top + "px";
  elem.name = elementName;
  elem.setAttribute("points", textAndScore.score);
  setStyle(elem, textAndScore.text, textAndScore.score);
  document.body.appendChild(elem);
  elem.id = elementName;
  var it = "#" + elem.id;
  console.info(it);

  if (effects) {
    addEffects(it);
    window.setTimeout(removeTextCallback, 5000, it);
    window.setInterval(updateText, 50, elem)
  }
  return elem
}

function setStyle(elem, actionText, score) {
  elem.actionText = actionText;
  var scale = Math.random() * 3 + 0.8;
  elem.color = "ff00000";
  elem.style.scale = scale;
  elem.textContent = elem.textContent.toUpperCase();
}

function getTextAndScore() {
  return {
    text: "text",
    score: parseFloat("1.00")
  };
}

function getLocation() {
  var foundElem = {
    name: "x"
  }
  while (foundElem.name != undefined) {
    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;
    var left = Math.round(Math.random() * fullWidth);
    var top = Math.round(Math.random() * fullHeight);
    console.info(left, top);
    var foundElem = document.elementFromPoint(left, top);
  }
  console.info(foundElem);
  return {
    left: left,
    top: top
  }
}

function addEffects(it) {
  $(it).fadeIn(1000, "linear");
  $(it).fadeOut(4300, "linear");
}

function updateText(elem) {
  var separator = "+"
  var x = -1.23
  score = (elem.getAttribute("points") - x).toFixed(2)
  elem.setAttribute("points", score)
  elem.textContent = elem.actionText + ": " + separator + score
  elem.textContent = elem.textContent.toUpperCase()
}

function removeTextCallback(id) {
  console.info("Removing " + id)
  $(id).remove()
}

body {
  font-family: 'Mukta', serif;
}

<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Mukta">

Используемый вами шрифт не имеет цифр фиксированной ширины. Попробуйте тот, который делает. Это важная особенность шрифтов, используемых для таких вещей, как счет (и личное раздражение - это игры AAA, в которых используются шрифты без цифр фиксированной ширины для их очков, что приводит к смещению на пиксель или два при изменении счета...)

— 02.03.2019 18:10

jquery-1.10.2.js: Опасность: jQuery 1.x и 2.x устарели и не получают обновлений безопасности. Обновите до поддерживаемой версии jQuery.

— 02.03.2019 18:16

Важно (с точки зрения стиля), что текстовая часть имеет переменную ширину. Я поставил это в исходном вопросе. Я буду использовать более свежую версию jquery - спасибо.

— 02.03.2019 20:04

javascript

02.03.2019 18:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите, чтобы был исправлен только текст, вы могли бы вместо создания div создать более сложный контейнер с «красивым» текстом и моноширинными числами. Вы должны добавить еще один контейнер в div, чтобы разделить стили.

var intervalID = window.setInterval(myCallback, 300, true, true);

        function myCallback(effects, updateScore) {

            var elementId = Math.round(Math.random() * 10000);
            var elementName = "element" + elementId;
            var location = getLocation();
            var textAndScore = getTextAndScore();
            var elem = document.createElement("div");
            elem.style.position = "absolute";
            elem.style.left = location.left + "px";
            elem.style.top = location.top + "px";
            elem.name = elementName;
            elem.setAttribute("points", textAndScore.score);
            setStyle(elem, textAndScore.text, textAndScore.score);
            document.body.appendChild(elem);
            elem.id = elementName;
            var it = "#" + elem.id;
            // console.info(it);

            if (effects) {
                addEffects(it);
                window.setTimeout(removeTextCallback, 5000, it);
                window.setInterval(updateText, 50, elem)
            }
            return elem
        }

        function setStyle(elem, actionText, score) {
            elem.actionText = actionText;
            var scale = Math.random() * 3 + 0.8;
            elem.color = "ff00000";
            elem.style.scale = scale;
            elem.textContent = elem.textContent.toUpperCase();
        }

        function getTextAndScore() {
            return {text: "text", score: parseFloat("1.00")};
        }

        function getLocation() {
            var foundElem = {
                name: "x"
            }
            while (foundElem != null && foundElem.name != undefined) { // added foundElement check
                var fullWidth = window.innerWidth;
                var fullHeight = window.innerHeight;
                var left = Math.round(Math.random() * fullWidth);
                var top = Math.round(Math.random() * fullHeight);
                // console.info(left, top);
                var foundElem = document.elementFromPoint(left, top);
            }
            // console.info(foundElem);
            return {left: left, top: top}
        }

        function addEffects(it) {
            $(it).fadeIn(1000, "linear");
            $(it).fadeOut(4300, "linear");
        }

        function updateText(elem) {
            var separator = "+"
            var x = -1.23
            score = (elem.getAttribute("points") - x).toFixed(2)
            elem.setAttribute("points", score)
            elem.textContent = elem.actionText + ": " + separator + score
            elem.textContent = elem.textContent.toUpperCase()
        }

        function removeTextCallback(id) {
            // console.info("Removing " + id)
            $(id).remove()
        }

body {
  /* font-family: 'Mukta', serif; */
  font-family: 'Lucida Console', serif; /* Added Monospace Font */
}

<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Mukta">

02.03.2019 19:34

Другие вопросы по теме

Как преобразовать массив JSON текстового формата в массив объектов JSON в NodeJS/JavaScript?

React Custom Hook не запускает обновления DOM

Как отключить перезагрузку при запуске функции JS в Laravel

Разрешить пользователю загружать изображения в папку x с расширением Chrome без кнопки отправки

Как передать данные javascript на другую страницу?

Получение «Невозможно прочитать свойство« длина »неопределенного» при попытке извлечения с URL-адреса в node.js

Множественное предложение Where не работает в запросе fire-store fire-base с использованием кода java-скрипта

Изменить вывод секунд на минуты и часы

Сохраняются ли функции JS и лямбда-выражения в сегменте кода процесса?

Как сделать аутентификацию в приложении с помощью bcrypt

Остановить "покачивание" текста при обновлении

Ответы 1

Другие вопросы по теме

Похожие вопросы