javascript - Php Counter Hides Comma after loading and not showing permanently

Solution:

According to the phpnumber_format, you want to group the number by thousands. You can to that by changing the return of thecalculate_value function like this:

return value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
Copy code

The regex will add a comma every 3 digits, like this:

   (function($) {

      $(document).ready(function(){

        var counter = $('#counter-number');
        var coutUp = Number(1);

        setInterval(function() {
          counter.text(calculate_value);
        }, 1000)

        function calculate_value() {
          var initDate = moment(20111031).format('x');
          var nowDate = moment().format('x');
          var dif = Number((nowDate - initDate) / 1000);
          var value = Number(dif * coutUp);
          // console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
          return value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

      });

    })(jQuery);Copy code

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="counter-number"></span>Copy code

507

votes

Answer

Solution:

Now it should keep the comma. You can set the number of decimals by changing the (2) parameter in toFixed() function in the end of the JS function.

<?php
$bg = get_field('counter_bg');

$init_value = get_field('init_value');
$init_date = get_field('init_date');
$seconds = strtotime("now") - strtotime($init_date);
$countup_value = get_field('countup_value');
$number = round((($seconds * $countup_value) + $init_value) * 100) / 100;

if($number) :
 $title = get_field('counter_title');
 $text = get_field('counter_text');
 ?>
 <section id="home-counter" <?php if($bg['url']) echo "style='background-image: url({$bg['sizes']['slide-thumb']})'"; ?>>
  <div >
   <?php
   if($title) echo "<h3 class='counter-title'>{$title}</h3>";
   echo "<div id='counter-number'>";
   echo Number_format ($number);
   echo "</div>";
   if($text) echo "<div class='counter-text'>{$text}</div>";
   ?>

  </div><!--containr-->
 </section><!--home-section-->

 <script>
  (function($) {

   $(document).ready(function(){

    var counter = $('#counter-number');
    var coutUp = Number(<?= $countup_value ?>);

    setInterval(function() {
     counter.text(calculate_value);
    }, 1000)

    function calculate_value() {
     var initDate = moment('<?= $init_date ?>').format('x');
     var nowDate = moment().format('x');
     var dif = Number((nowDate - initDate) / 1000);
     var value = Number(dif * coutUp);
     // console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
     return value.toFixed(2).replace(".", ",")
    }

   });

  })(jQuery);
 </script>

<?php endif; ?>
Copy code

Undefined answered

2022-09-6

Link to answer

Share

Similar questions

Find the answer in similar questions on our website.

Solution:

Now it should keep the comma. You can set the number of decimals by changing the (2) parameter in toFixed() function in the end of the JS function.

<?php
$bg = get_field('counter_bg');

$init_value = get_field('init_value');
$init_date = get_field('init_date');
$seconds = strtotime("now") - strtotime($init_date);
$countup_value = get_field('countup_value');
$number = round((($seconds * $countup_value) + $init_value) * 100) / 100;

if($number) :
 $title = get_field('counter_title');
 $text = get_field('counter_text');
 ?>
 <section id="home-counter" <?php if($bg['url']) echo "style='background-image: url({$bg['sizes']['slide-thumb']})'"; ?>>
  <div >
   <?php
   if($title) echo "<h3 class='counter-title'>{$title}</h3>";
   echo "<div id='counter-number'>";
   echo Number_format ($number);
   echo "</div>";
   if($text) echo "<div class='counter-text'>{$text}</div>";
   ?>

  </div><!--containr-->
 </section><!--home-section-->

 <script>
  (function($) {

   $(document).ready(function(){

    var counter = $('#counter-number');
    var coutUp = Number(<?= $countup_value ?>);

    setInterval(function() {
     counter.text(calculate_value);
    }, 1000)

    function calculate_value() {
     var initDate = moment('<?= $init_date ?>').format('x');
     var nowDate = moment().format('x');
     var dif = Number((nowDate - initDate) / 1000);
     var value = Number(dif * coutUp);
     // console.log(initDate, nowDate, dif, value, '<?= $init_date ?>');
     return value.toFixed(2).replace(".", ",")
    }

   });

  })(jQuery);
 </script>

<?php endif; ?>
Copy code