視口中的影片數字-使用逗號

我已經創建了一些影片到所需值的代碼，（帶逗號） ans 作業正常。我無法解決的是如何讓影片在視口中開始。我看過其他答案，但我似乎無法讓它發揮作用。想法或建議得到了極大的重視。

var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth()   1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm   '/'   dd   '/'   yyyy;
var answer = diff * 134256;

function commaSeparateNumber(val){
while (/(\d )(\d{3})/.test(val.toString())){
  val = val.toString().replace(/(\d)(?=(\d\d\d) (?!\d))/g, "$1,");
}
return val;
}
document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));


$(".fig-number").each(function () {
$(this)
  .prop("Counter", 0)
  .animate(
    {
      Counter: $(this).text()
    },
    {
      duration: 3000,
      easing: "swing",
      step: function (now, tween) {
        // Check added for decimal number
        if(parseInt(tween.end) == parseFloat(tween.end)){
            var number = Math.ceil(now);
          $(this).text(number.toLocaleString());
        }
      },
    }
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. </script>

<p id="CCalc" class="fig-number">39471264</p>

uj5u.com熱心網友回復：

answer 在這一行中未定義：

document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));

一旦你考慮到這一點，影片就會起作用。

function commaSeparateNumber(val) {
  while (/(\d )(\d{3})/.test(val.toString())) {
    val = val.toString().replace(/(\d)(?=(\d\d\d) (?!\d))/g, "$1,");
  }
  return val;
}

// created for reference
const ccalc = document.getElementById("CCalc");
ccalc.innerText = parseFloat(commaSeparateNumber(ccalc.innerText).replace(/,/g, ''));


$(".fig-number").each(function() {
  $(this)
    .prop("Counter", 0)
    .animate({
      Counter: $(this).text()
    }, {
      duration: 3000,
      easing: "swing",
      step: function(now, tween) {
        // Check added for decimal number
        if (parseInt(tween.end) == parseFloat(tween.end)) {
          var number = Math.ceil(now);
          $(this).text(number.toLocaleString());
        }
      },
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="CCalc" class="fig-number">39471264</p>

uj5u.com熱心網友回復：

解決了。如果有人需要，這是作業代碼。

<script type ="text/javascript">
var startDate = new Date('01-01-2021');
var today = new Date();
var diff = Math.floor((today - startDate)/(1000*60*60*24))
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth()   1).padStart(2, '0');
var yyyy = today.getFullYear();
today = mm   '/'   dd   '/'   yyyy;
var answer = diff * 134256;

function commaSeparateNumber(val){
while (/(\d )(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d) (?!\d))/g, "$1,");
}
return val;
}

document.getElementById("CCalc").innerHTML = 
parseFloat(commaSeparateNumber(answer).replace(/,/g, ''));

(function($){
$(function() {
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el){
  function visPx(){
    var H = $(this).height(),
        r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
    return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
  } visPx();
  $(win).on("resize scroll", visPx);
  });
};
}(jQuery, window));
jQuery(function($) {
$(".fig-number").inViewport(function(px) {
if(px>0 && !this.initNumAnim) { 
  this.initNumAnim = true;
  $(this).prop('Counter',0).animate({
    Counter: $(this).text()
  }, {
    duration: 1000,
    step: function (now, tween) {
      if(parseInt(tween.end) == parseFloat(tween.end)){
        var number = Math.ceil(now);
      $(this).text(number.toLocaleString());
    }
    }
  });         
}
});

});
});
})( jQuery );
</script>

標籤：javascript 查询

上一篇：在加載時隱藏特定文本，但使用相同的文本來標識單擊事件的元素

下一篇：控制鏈接是否可點擊