[js] 数字分开显示

2024-06-17 11:52

文章标签 显示 js 数字分开

本文主要是介绍[js] 数字分开显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<div id="number-container" class="number-container"></div>

const number = 123.45; // 要拆分的数字（包括小数）
const numberContainer = document.getElementById('number-container');// 将数字转换为字符串，并分别处理整数部分和小数部分
const parts = String(number).split('.');
const integerDigits = parts[0];
const decimalDigits = parts[1];// 处理整数部分
integerDigits.split('').forEach((digit) => {const spanElement = document.createElement('span');spanElement.textContent = digit;spanElement.style.width = '32px';spanElement.style.height = '38px';spanElement.style.borderRadius = '4px';spanElement.style.background = '#d5f1ff';spanElement.classList.add('digit');numberContainer.appendChild(spanElement);
});// 如果存在小数部分，处理小数部分
if (decimalDigits) {const decimalSpan = document.createElement('span');decimalSpan.textContent = '.';numberContainer.appendChild(decimalSpan);decimalDigits.split('').forEach((digit) => {const spanElement = document.createElement('span');spanElement.textContent = digit;spanElement.style.width = '32px';spanElement.style.height = '38px';spanElement.style.borderRadius = '4px';spanElement.style.background = '#d5f1ff';spanElement.classList.add('digit');numberContainer.appendChild(spanElement);});
}

.number-container {display: flex;align-items: center;justify-content: space-between;// gap: 0 14px;font-family: DINPro;font-size: 22px;font-weight: bold;color: #1d6389;line-height: 38px;text-align: center;margin-top: 16px;
}