这是一个漂亮的数字代码。一整天我都想知道并试图修改代码以使其成为我想要的，但直到现在还没有成功！如果您使用两位或更多位数字，则代码会创建单独的黑色方块来保存每个数字（运行代码片段查看），但我只想要一个正方形作为容器来保存多位数字。所以如果我们有一个像10这样的两位数，数字代码应该是这样的：下一步应该是这样的：我不想要那些像这样移动两位数的并行动画（只需要单个动画，而不是两个）：这是代码：let counters = document.getElementsByClassName('number-ticker');let defaultDigitNode = document.createElement('div');defaultDigitNode.classList.add('digit');for (let i = 0; i < 11; i++) { defaultDigitNode.innerHTML += i + '<br>';}[].forEach.call(counters, function(counter) { let currentValue = 10; let digits = []; generateDigits(currentValue.toString().length); setValue(currentValue); setTimeout(function() { setValue(8); }, 2000); setTimeout(function() { setValue(7); }, 5000); function setValue(number) { let s = number.toString().split('').reverse().join(''); let l = s.length; if (l > digits.length) { generateDigits(l - digits.length); } for (let i = 0; i < digits.length; i++) { setDigit(i, s[i] || 0); } } function setDigit(digitIndex, number) { digits[digitIndex].style.marginTop = '-' + number + 'em'; } function generateDigits(amount) { for (let i = 0; i < amount; i++) { let d = defaultDigitNode.cloneNode(true); counter.appendChild(d); digits.unshift(d); } }});<!doctype html><html><head> <meta charset="utf-8"> <title>Number Ticker</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="number-ticker.css"></head><body> <div class="container"> <div class="number-ticker" data-value="0"></div> </div> <script src="number-ticker.js"></script></body></html>
2 回答
潇湘沐
TA贡献1816条经验 获得超6个赞
你的css有这个
.number-ticker .digit {
float: left;
line-height: 1;
transition: margin-top 1.75s ease;
border-right: 1px solid #555;
padding: 0 0.075em;
}
你需要把它改成这个
.number-ticker .digit {
float: left;
line-height: 1;
transition: margin-top 1.75s ease;
padding: 0 0.075em;
text-align: center;
}
如果您删除border-right: 1px solid #555它，您将看到它像 1 个盒子。
我还添加text-align: center了数字居中。
希望这能解决您的问题:)
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
我认为您的代码中的主要问题是digits变量。它创建一个包含两个块的 HTML 元素数组。
另外，对于这一行： let s = number.toString().split('').reverse().join(''); 为什么需要将数字转换为字符串。您可以按原样传递它。使用 + 添加到字符串后，它将被转换。
我对您的代码进行了一些更改，并注释掉了不相关的部分。请参阅以下内容：
let counters = document.getElementsByClassName('number-ticker');
let defaultDigitNode = document.createElement('div');
defaultDigitNode.classList.add('digit');
for (let i = 0; i < 11; i++) {
defaultDigitNode.innerHTML += i + '<br>';
}
[].forEach.call(counters, function(counter) {
// let currentValue = 10;
// let digits = [];
let currentValue = counter.getAttribute("data-value");
let digit = null;
generateDigits(currentValue.toString().length);
setValue(currentValue);
setTimeout(function() {
setValue(8);
}, 2000);
setTimeout(function() {
setValue(7);
}, 5000);
setTimeout(function() {
setValue(10);
}, 8000);
function setValue(number) {
// let s = number.toString().split('').reverse().join('');
// let l = s.length;
/*if (l > digits.length) {
generateDigits(l - digits.length);
}*/
/*for (let i = 0; i < digits.length; i++) {
setDigit(i, s[i] || 0);
}*/
digit.style.marginTop = '-' + number + 'em';
}
/*function setDigit(digitIndex, number) {
console.log(number);
digits[digitIndex].style.marginTop = '-' + number + 'em';
}*/
function generateDigits(amount) {
// console.log("generat", amount);
// for (let i = 0; i < amount; i++) {
let d = defaultDigitNode.cloneNode(true);
digit = counter.appendChild(d);
// digits.unshift(d);
// }
}
});
:root {
background-color: #555;
color: white;
font-size: 25vh;
font-family: Roboto Light;
}
body,
html {
margin: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.number-ticker {
overflow: hidden;
height: 1em;
background-color: #333;
box-shadow: 0 0 0.05em black inset;
}
.number-ticker .digit {
float: left;
line-height: 1;
transition: margin-top 1.75s ease;
border-right: 1px solid #555;
padding: 0 0.075em;
text-align: center;
}
<div class="container">
<div class="number-ticker" data-value="0"></div>
</div>
你最终的 JS 可能是这样的：
let counters = document.getElementsByClassName('number-ticker');
let defaultDigitNode = document.createElement('div');
defaultDigitNode.classList.add('digit');
for (let i = 0; i < 11; i++) {
defaultDigitNode.innerHTML += i + '<br>';
}
[].forEach.call(counters, function(counter) {
let currentValue = counter.getAttribute("data-value");
let d = defaultDigitNode.cloneNode(true);
let digit = counter.appendChild(d);
setValue(currentValue);
function setValue(number) {
digit.style.marginTop = '-' + number + 'em';
}
});
添加回答
举报
0/150
提交
取消