修改这个漂亮的数字自动收报机
这是一个漂亮的数字代码。一整天我都想知道并试图修改代码以使其成为我想要的，但直到现在还没有成功！
如果您使用两位或更多位数字，则代码会创建单独的黑色方块来保存每个数字（运行代码片段查看），但我只想要一个正方形作为容器来保存多位数字。所以如果我们有一个像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回答
-
潇湘沐
你的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了数字居中。希望这能解决您的问题:) -
天涯尽头无女友
我认为您的代码中的主要问题是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'; }});
随时随地看视频慕课网APP
相关分类
JavaScript