<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;
}