Javascript 从“停止文本”；“抖动”；更新时

我正在更新元素中的

textContent

，以便给人一种分数在增加的印象。然而，当我这样做时，整个文本字段似乎在“抖动”，因为它似乎是中心对齐的。我想使用可变字段宽度字体。通过运行以下命令，可以看到这种行为。也可以随意推荐任何样式更改。目标是使文本锚定，而不是“抖动”

var intervalID=window.setInterval（myCallback，300，true，true）；
函数myCallback（效果、更新核心）{
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=“绝对”；
elem.style.left=location.left+“px”；
elem.style.top=location.top+“px”；
elem.name=elementName；
elem.setAttribute（“points”，textAndScore.score）；
设置样式（elem，textAndScore.text，textAndScore.score）；
文件.正文.附件（elem）；
elem.id=elementName；
var it=“#”+elem.id；
console.log（it）；
如果（影响）{
附加效应（it）；
setTimeout（removextcallback，5000，it）；
setInterval（updateText，50，elem）
}
返回元素
}
函数设置样式（元素、动作文本、分数）{
elem.actionText=actionText；
var scale=Math.random（）*3+0.8；
elem.color=“ff00000”；
elem.style.scale=比例；
elem.textContent=elem.textContent.toUpperCase（）；
}
函数getTextAndScore（）{
返回{
文本：“文本”，
分数：1.00分
};
}
函数getLocation（）{
var foundElem={
名称：“x”
}
while（foundElem.name！=未定义）{
var fullWidth=window.innerWidth；
var fullHeight=window.innerHeight；
var left=Math.round（Math.random（）*fullWidth）；
var top=Math.round（Math.random（）*全高）；
控制台日志（左，顶部）；
var foundElem=document.elementFromPoint（左，上）；
}
控制台日志（foundElem）；
返回{
左:左,，
顶端：顶端
}
}
函数addEffects（it）{
美元（it）.fadeIn（1000，“线性”）；
美元（it）.fadeOut（4300，“线性”）；
}
函数updateText（elem）{
var separator=“+”
var x=-1.23
分数=（elem.getAttribute（“分数”）-x）.toFixed（2）
元素设置属性（“点”，分数）
elem.textContent=elem.actionText+“：”+分隔符+分数
elem.textContent=elem.textContent.toUpperCase（）
}
函数removeTextCallback（id）{
console.log（“删除”+id）
$（id）.删除（）
}

正文{
字体系列：“Mukta”，衬线；
}

---

如果您只想修复文本，可以不创建

div

而是创建一个包含“漂亮”文本和单间隔数字的更复杂容器。您必须在div中添加另一个容器，以将样式分开

var intervalID=window.setInterval（myCallback，300，true，true）；
函数myCallback（效果、更新核心）{
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=“绝对”；
elem.style.left=location.left+“px”；
elem.style.top=location.top+“px”；
elem.name=elementName；
elem.setAttribute（“points”，textAndScore.score）；
设置样式（elem，textAndScore.text，textAndScore.score）；
文件.正文.附件（elem）；
elem.id=elementName；
var it=“#”+elem.id；
//console.log（it）；
如果（影响）{
附加效应（it）；
setTimeout（removextcallback，5000，it）；
setInterval（updateText，50，elem）
}
返回元素
}
函数设置样式（元素、动作文本、分数）{
elem.actionText=actionText；
var scale=Math.random（）*3+0.8；
elem.color=“ff00000”；
elem.style.scale=比例；
elem.textContent=elem.textContent.toUpperCase（）；
}
函数getTextAndScore（）{
返回{text:“text”，分数：parseFloat（“1.00”）}；
}
函数getLocation（）{
var foundElem={
名称：“x”
}
而（foundElem！=null&&foundElem.name！=undefined）{//添加了foundElement检查
var fullWidth=window.innerWidth；
var fullHeight=window.innerHeight；
var left=Math.round（Math.random（）*fullWidth）；
var top=Math.round（Math.random（）*全高）；
//控制台日志（左，顶部）；
var foundElem=document.elementFromPoint（左，上）；
}
//控制台日志（foundElem）；
返回{left:left，top:top}
}
函数addEffects（it）{
美元（it）.fadeIn（1000，“线性”）；
美元（it）.fadeOut（4300，“线性”）；
}
函数updateText（elem）{
var separator=“+”
var x=-1.23
分数=（elem.getAttribute（“分数”）-x）.toFixed（2）
元素设置属性（“点”，分数）
elem.textContent=elem.actionText+“：”+分隔符+分数
elem.textContent=elem.textContent.toUpperCase（）
}
函数removeTextCallback（id）{
//console.log（“删除”+id）
$（id）.删除（）
}

正文{
/*字体系列：“Mukta”，衬线*/
字体系列：“Lucida Console”，衬线；/*添加了单空格字体*/
}

---

您使用的字体没有固定宽度的数字。试试那个。这是字体的一个重要特性，用于记分（个人恼怒是AAA游戏，其特点是字体的分数没有固定宽度的数字，因此