Question

大家好！，当我看到number-counter时，我一直努力制作，直到看到从1到{{1 }}，然后从85到85（应该先增加然后停止）。我试图通过添加仅一次启动计数器功能的功能来解决此问题，但这种方法无法解决。

如果您有优惠，我请您与我分享）

// Persent-counter
var isResizeble_1 = false;
var isResizeble_2 = false;

function first_num_count(){
	if(!isResizeble_2) {
    // The count function
		$('#count-num').each(function(){
			$(this).prop('Counter', 0).animate({
				Counter: $(this).text()
			},{
				duration: 2000,
				easing: 'swing',
				step: function(now){
					$(this).text(Math.ceil(now));
				}
			});
		});

		isRezeble_2 = true;
	}
}

// The trigger element
var firstPersent = document.querySelector('#persent');

var Visible = function (target) {
  // Get elem's positions
  var targetPosition = {
  	top: window.pageYOffset + target.getBoundingClientRect().top,
  	left: window.pageXOffset + target.getBoundingClientRect().left,
  	right: window.pageXOffset + target.getBoundingClientRect().right,
  	bottom: window.pageYOffset + target.getBoundingClientRect().bottom
  },
    // Get window's positions
    windowPosition = {
    	top: window.pageYOffset,
    	left: window.pageXOffset,
    	right: window.pageXOffset + document.documentElement.clientWidth,
    	bottom: window.pageYOffset + document.documentElement.clientHeight
    };

    if (targetPosition.bottom > windowPosition.top &&
    	targetPosition.top < windowPosition.bottom &&
    	targetPosition.right > windowPosition.left &&
    	targetPosition.left < windowPosition.right) {
    	
    // If we see the elem
	// Do our counting function only once
	if(!isResizeble_1) {
		first_num_count();
		isRezeble_1 = true;
	}

  }
};

// Start function onscroll
window.addEventListener('scroll', function() {
	Visible(firstPersent);
});

body{
  height 900px;
}

.number-persent{
  margin-top: 600px;
  display: flex;
}

Answer 1

移动var isResizeble_2 = false;在函数外部，否则它将始终运行if中的内容。并修复您的变量名错字。

  	var isResizeble_2 = false;
// Persent-counter
function first_num_count(){

	if(!isResizeble_2) {
    // The count function
		$('#count-num').each(function(){
			$(this).prop('Counter', 0).animate({
				Counter: $(this).text()
			},{
				duration: 2000,
				easing: 'swing',
				step: function(now){
					$(this).text(Math.ceil(now));
				}
			});
		});

		isResizeble_2 = true;
	}
}

// The trigger element
var firstPersent = document.querySelector('#persent');

var Visible = function (target) {
  // Get elem's positions
  var targetPosition = {
  	top: window.pageYOffset + target.getBoundingClientRect().top,
  	left: window.pageXOffset + target.getBoundingClientRect().left,
  	right: window.pageXOffset + target.getBoundingClientRect().right,
  	bottom: window.pageYOffset + target.getBoundingClientRect().bottom
  },
    // Get window's positions
    windowPosition = {
    	top: window.pageYOffset,
    	left: window.pageXOffset,
    	right: window.pageXOffset + document.documentElement.clientWidth,
    	bottom: window.pageYOffset + document.documentElement.clientHeight
    };

    if (targetPosition.bottom > windowPosition.top &&
    	targetPosition.top < windowPosition.bottom &&
    	targetPosition.right > windowPosition.left &&
    	targetPosition.left < windowPosition.right) {
    	
    // If we see the elem
	// Do our counting function only once
	var isResizeble_1 = false;

	if(!isResizeble_1) {
		first_num_count();
		isResizeble_1 = true;
	}

} else {
    // If we don't see the elem
    
};
};

// Start function onscroll
window.addEventListener('scroll', function() {
	Visible(firstPersent);
});

body{
  height 900px;
}

.number-persent{
  margin-top: 600px;
  display: flex;
}

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<body>
  <div class="number-persent">
    <p id="count-num">85</p>
    <p id="persent">%</p>
  </div>
 </body>

数字计数器将数字从1增加到最大值，然后将其从该值减小到1。但是应该增加然后停止

1 个答案: