关于前端数值转换的问题,该如何实现?

前端设置一个默认数值,然后该数值打到五位数之后自动转换成万级单位,十万转换成10W,以此往上类推。

这个结构需要提取数字格式化后再替换,注意js代码用现在最新的,其他的不要增加

img

<span class="number">10000人阅读</span><br />
<span class="number">100000人阅读</span>
<script>

    function getFormat(num) {
        if (num >= 100000000) {
            return Math.floor(num / 100000000) + '亿'
        }
        if (num >= 10000) {
            return Math.floor(num / 10000) + '万'
        }
        return num;
    }
    window.addEventListener('load', function () {
        var numbers = document.querySelectorAll('.number');
        var cttimer = setInterval(function () {
            if (!/\d+/.test(numbers[0].innerHTML)) return;//模板未渲染退出
            //已经成功渲染数据
            clearInterval(cttimer)//清除计时器
            //执行格式化代码
            for (var i = 0; i < numbers.length; i++) {
                var m = /\d+/.exec(numbers[i].innerHTML);//提取数字部分
                numbers[i].innerHTML = numbers[i].innerHTML.replace(m[0], getFormat(parseFloat(m[0])))
            }
        }, 100);
    });
</script>

有帮助麻烦点下【采纳该答案】

我根据你提供的思路是不是这样的
首先需要模板渲染出实际的数值,渲染成功后然后再执行下面的转换代码。
如果未渲染成功则跳出。渲染成功后自动进行转换。
逻辑是这样的吗?但我不知道咋写JS

新问题似乎又出来了.....

img


红色框里面..有些的被转换了,有些的又未被转换....

img


JS这里我改了,因为CMS渲染时会自动增加一个标签,里面的CSS名称是“eyou_arcclick”,我获取这个css然后对其进行值的转换。

就是时而成功,时而失败,这就好尴尬.....

img


上图是控制台里面的源码

img


上图是编辑器里面的源码