Блог

Главная - Вопросы по программированию - Могу ли я динамически добавлять запятую (,) в псевдоэлемент CSS, значение которого исходит из переменной CSS

Могу ли я динамически добавлять запятую (,) в псевдоэлемент CSS, значение которого исходит из переменной CSS

#javascript #html #jquery #css

Вопрос:

Я хочу соответствующим образом вставить запятые между цифрами. например: 6350

есть ли какой-либо способ, которым я могу достичь этого в следующем сценарии

 setTimeout(function () {
  $('.number-counter').each(function () {
    $(this).addClass('inView');
  });
}, 500); 
 @property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.number-counter {
  transition: --num 3s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
}
.number-counter::after {
  content: counter(num);
}
.number-counter.inView {
  --num: var(--count);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="number-counter" style="--count: 6350;"></div>

Комментарии:

1. content: counter(num) ","; Тогда просто назначьте. (И перепишите это снова версией без запятой для последнего числа, если вы также не хотите, чтобы за этим стояла запятая.)

2. спасибо за ответ CBroe. но мне нужна кома между числами. например: 6 350, 2 66 350 и т. Д

3. Я не думаю, что это будет возможно только в CSS, вам, вероятно, придется переключиться на часть JS, которая уже правильно форматирует число в строковой переменной.

Ответ №1:

Я попытался добавить этот код в CSS, но подсчитать цифры в CSS невозможно, поэтому я добавил запятую (,) с помощью jQuery. Я надеюсь, что это вам поможет. Он добавит запятую после 3 цифр.

 setTimeout(function () {
  jQuery('.number-counter').each(function () {
    jQuery(this).addClass('inView');
    var $this = jQuery(this);
     countTo = $this.attr('data-count');
  jQuery({ countNum: $this.text()}).animate({countNum: countTo},
    {     
      easing: 'linear',
      step: function() {
              $this.text(commaSeparateNumber(Math.ceil(this.countNum)));
  },
  complete: function() {
    $this.text(commaSeparateNumber(Math.ceil(this.countNum)));
      }
    });
  });
}, 500);
function commaSeparateNumber(val) {
  while (/(d )(d{3})/.test(val.toString())) {
    val = val.toString().replace(/(d )(d{3})/, '$1'   ','   '$2');
  }
  return val;
} 
 @property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.number-counter {
  transition: --num 3s;
  counter-set: num var(--num);
  font: 800 40px system-ui;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-counter" style="--count: 6350;" data-count="6350"></div>

Комментарии:

1. спасибо вам за ответ и это альтернативное решение. он хорошо работает

2. @MuhammedMuneer Добро пожаловать.

Метки: , ,