利用伪元素生成“0”实现自动补全
2021-12-31 2022-03-03
if (num < 10) {
num = '0' + num
}
问大家一个问题你知不知道用CSS也能轻松完成数字前面加0？就是用很多个”0″假装挤进去填满达到效果！首先，先把那个要加零的网页数字拆开（元素结构），然后，咱们就给它量身高和腰围，确定一下具体需要多少”0″。选哪个单位？我觉得就”c”好，因为它代表字符0的宽度，然后我们告诉它身高，让它往右边挪挪，这样一来，那些比实际字符宽出好多的”0″就在一边疯狂填充了，看起来就好像数字前面真的多了几个零。这种方法其实很实用的，无论是要在数字前加零还是限制输入框里可以输几个字这种情况都能用！
'3'.padStart(2, '0') // 结果是 ’03‘ '12'.padStart(2, '0') // 结果是 ’12‘
2 - 28
碰到小于10的值得加个”0″的话，咱们用伪元素也是可以解决滴！只需妙用CSS变量来管管它是显露还是藏起来，再利用透明度、或是margin-left等方法调高调低它的位置，那么数字就在指定地方乖乖出现！虽然多费点心思，但这样不是轻松实现字符串里自己填零的效果吗？
span{
font-family: Consolas, Monaco, monospace;
}
利用计数器生成自动补全效果
span{
/**/
display: inline-flex;
width: 2ch;
justify-content: flex-end;
}
有个神奇的方法，咱能用计数器做个字符串补全。具体步骤就是先偷偷隐藏原本的文字，然后利用计数器让CSS变量悄悄露出马脚哟~那怎么设置计数器的颜值捏?通过调整counter这个家伙就行，比如调用decimal-leading-zero这个特性，完美实现十进制数字前加水印0的效果。这方法和咱平常填充字符串的方式很像，操作简单又实用！
如果你要搞大量位数问题，试试这个叫做@counter-style/pad 的规矩。就是给自己的计数器加点填充属性，设下在哪些位数上加几个数字就行了。这样计数器就能自动给你补全剩下的空位置，让字符串看上去更饱满！这个方法超好用，灵活度高，不管啥位数都能轻松应对～
span::before{
content: '0'
}
span{
display: inline-flex;
width: 2ch;
justify-content: flex-end;
overflow: hidden;
}
总结与展望
2 - 28
看完这文你就能学到能用啥小技巧去提升用户感受！无论是弄个假元素、算个数儿，或者是利用那个@counter-style和pad，都能轻松搞定数字格式这个事。注意选哪个还是得看看实际情况才能找出最好的方法来嘿。
span::before{
content: '0'
}
有没有跟你正在忙的任务类似的事情？你是用什么方法解决的？快分享一下你的小妙招！
span::before{
/**/
opacity: calc(10 - var(--num));
}
。
评论0