代码之家 › 专栏 › 技术社区 › Richard Green

更新时阻止文本“抖动”

javascript

-1

Richard Green · 技术社区 · 5 年前

我正在更新 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.log(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.log(left, top);
    var foundElem = document.elementFromPoint(left, top);
  }
  console.log(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.log("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">

0 回复 | 直到 5 年前

SirPilan 5 年前

如果只想修复文本,可以不创建 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.log(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.log(left, top);
                var foundElem = document.elementFromPoint(left, top);
            }
            // console.log(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.log("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">