网站首页 > 技术文章正文

如何使用 CSS 将数字格式化为货币?

nanyue 2024-10-07 11:08:09 技术文章 17 ℃

每天学一点CSS，我会不定期更新

我们给出或是读取某一个数字符时，使用 CSS + JavaScript 将 HTML 元素的数字格式化为货币。目前使用纯 CSS还暂时无法完成任务。需要一些 JavaScript 来解析数字以添加逗号。

方法：在代码中，CSS 类currSign在数字前添加货币符号（如'#39;）。JavaScript 函数toLocaleString()返回一个字符串，该字符串具有数字的语言敏感表示。

例如：

<!DOCTYPE html>
<html>
  
<head>

<style>
.currSign:before {
            content: '#39;;
        }
</style>
</head>
  
<body>
<!-- Some unformatted numbers -->
<div class="a">88123.45</div>
<div class="a">75123.45</div>
<div class="a">789415123.45</div>
<div class="a">123</div>
  
<!-- Javascript -->
<script>
let x = document.querySelectorAll(".a");
for (let i = 0, len = x.length; 
     i < len; i++) {
let num = Number(x[i].innerHTML)
 .toLocaleString('en');
x[i].innerHTML = num;
x[i].classList.add("currSign");
 }
</script>
</body>
  
</html>

得到的效果如下：

$ 88,123.45
$ 75,123.45
$ 789,415,123.45
$ 123

前面设置人员通常在设置商城或是财务管理界面时经常会遇到这种需求。只要控掌了方法后是不是感觉很简单~

上一篇：用HTML5构建一个流程图绘制工具（html css js 流程图）
下一篇： python 读取 excel 生成 html 页面

网站首页 > 技术文章 正文

如何使用 CSS 将数字格式化为货币?

猜你喜欢

网站首页 > 技术文章正文