主页 / 问题 / 1148276
Accepted
MoloF
Asked:2020-07-03 00:19:39 +0800 CST2020-07-03 00:19:39 +0800 CST

JS | 数字前的额外零

  • 772

如何做出用零填充数字的效果？

0从到有一个数字999。

根据这个数字的长度，有必要在它前面输出零。

如果是数字9，结果是009。

如果是数字27，结果是027。

如果是数字120，结果是120。

零本身必须包含在标签span中。

const block = document.querySelector('div');
const zeroLength = 3;

let value = 27;

function update() {
    const valueSplit = value.toString().split('').reverse();
        
    const result = [...new Array(zeroLength)].map((_, index) => {
        const number = valueSplit[valueSplit.length - 1 - index] || 0;
        const className = number === 0 ? 'zero' : null;
        return `<span class="${className}">${number}</span>`;
    });
    
    block.innerHTML = result.join('');
    
    value = (value + 1) % 300;
    
    requestAnimationFrame(update);
}

requestAnimationFrame(update);
body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #272727;
    color: #fff;
    font-family: Arial;
    min-height: 100vh;
}

div {
    font-size: 100px;
    display: flex;
}

span {
    width: 75px;
    display: block;
}

span.zero {
    opacity: 0.25;
}
<div></div>

我的代码没有按我想要的方式工作。我无法理解在数字前添加零的逻辑的本质。在我看来，这更容易完成，而且不像我做的那样麻烦。

在可以寻找已经相似的效果或至少建议该效果的名称的情况下，即使称为该效果，也无需考虑。

javascript

2 个回答

  1. 如果问题只是关于填充零并且您可以使用字符串，那么您只需要padStart()函数：

     const zeroLength = 3;
 
 console.log('9'.padStart(zeroLength, '0'));
 console.log('27'.padStart(zeroLength, '0'));
 console.log('120'.padStart(zeroLength, '0'));

    • 3
  2. Best Answer

    使用slice的方法的替代方法padStart如下：

    1. 在开头添加最大数量的零
    2. 我们从结果字符串的末尾获取字符数
    ('000'+value).slice(-3);

    例子：

    const block = document.querySelector('div');
const zeroLength = 3;

let value = 7;
let prev = 0;

function update(time) {
  requestAnimationFrame(update);

  if (time - prev < 100) return;
  prev = time;

  block.innerHTML = ('000'+value).slice(-zeroLength).split('').map(el=>`<span class="${el == '0' ? 'zero' : 'num'}">${el}</span>`).join('');

  value = (value + 1) % 300;

}

requestAnimationFrame(update);
    body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #272727;
  color: #fff;
  font-family: Arial;
  min-height: 100vh;
}

div {
  font-size: 100px;
  display: flex;
}

span {
  width: 75px;
  display: block;
}

span.zero {
  opacity: 0.25;
}

span.num~span.zero {
  opacity: 1;
}
    <div></div>

    • 1

相关问题