我正在更新元素中的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 :(得分:0)
如果只想固定文本,则可以代替创建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">