ipooqi2009 2024-04-18 22:56 采纳率: 27.3%
浏览 20
已结题

如何让网页的数字显示这样的格式？

img

如图所示，如何让网页中的数字显示成图片中这样的样式，样式有如下两点：
1：数字字体样式（实在没有接近也可以）。
2：每三位数字一个逗号这样的格式
谢谢

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-18 22:56
    关注

    引自免费微信小程序：皆我百晓生

    要实现这个效果，你需要使用HTML、CSS和JavaScript来组合完成。这里是一个简单的示例，展示了如何在网页上显示数字并按照指定的格式添加千位分隔符。首先，创建一个基本的HTML结构，包含你要显示数字的元素：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number Formatting Example</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div class="wallet-balance">钱包余额（元）<span id="walletBalance">685,856.88</span></div>
    <div class="monthly-income">本月总收入（元）<span id="monthlyIncome">5,000.00</span></div>
    <div class="disposable-income">可支配（元）<span id="disposableIncome">65,856.00</span></div>

    <script>
        // 这里是 JavaScript 代码
    </script>
</body>
</html>

    接下来，在<style>标签内添加CSS样式，调整字体样式。在这里，我们使用Google Fonts的Roboto字体作为例子，你可以根据实际需求替换为其他字体。确保在HTML头部引入Google Fonts链接：

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
    
    .wallet-balance,
    .monthly-income,
    .disposable-income {
        display: flex;
        align-items: center;
    }

    #walletBalance,
    #monthlyIncome,
    #disposableIncome {
        font-size: 24px;
        margin-left: 10px;
    }
</style>

    然后，在<script>标签内添加JavaScript代码，用于处理数字格式化：

    document.addEventListener('DOMContentLoaded', function () {
    formatNumbers();
});

function formatNumbers() {
    const numbers = document.querySelectorAll('[id^="number"]'); // 获取所有以 number 开头的 ID
    numbers.forEach(function (numberElement) {
        const number = parseFloat(numberElement.innerText.replace(/,/g, ''));
        numberElement.innerText = number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    });
}

// 当页面发生滚动时，重新格式化数字
window.addEventListener('scroll', formatNumbers);

    这段代码会在页面加载完成后以及用户滚动页面时自动格式化数字。它会查找所有以id^="number"开头的元素，并将其中的数字文本转换为浮点数，然后应用千位分隔符和两位小数的格式。注意，这里的 [id^="number"] 是选择器，用于匹配所有以 "number" 开头的 id 属性。

    这样，你就得到了与提供的图片类似的数字格式。你可以根据需要调整CSS样式和JavaScript代码，以适应你的具体需求。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月18日