Question

所以基本上，我从一个宁静的API中提取数字和图像。我想要做的是制作一个排序动画，使得评级每毫秒增加1，其中Start是评级减去300而结尾是实际评级。我有一些代码，但它似乎没有在我的网站上显示任何东西，我可能犯了一个错误，但我不知道在哪里。任何人都可以给我建议或指出我正确的方向吗？

<!-- Calls on API, requests current SR -->
<script>
  let requestUrl = "https://ow-api.com/v1/stats/pc/us/ShalevBito-
2753/complete";
  let request = new XMLHttpRequest();
  request.open('GET', requestUrl);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    logData(request.response);
  }
  function logData(data) {
    document.querySelector('.rating').innerText = `${data['rating']}`;
    document.querySelector('.rank').src = `${data['ratingIcon']}`;
    var start = `${data['rating']}`;
    var counter = `${data['rating']}` - 300;
  }
  if (counter < start) {
    counter++;
  }
</script>

<!-- Displays current SR -->
<p class="counter"</p>
<img class="rank">

Answer 1

我假设你想在你的代码中实现这样的东西：

您需要使用setInterval多次重复此功能调用。将你的计数器从logData中取出（这样它每次都不会重置）然后修改您的logData以包含clearInterval api

   
    var repeater = setInterval(logData, 1, 700);
    
    var start = 700;
    var counter = 700 - 300;

    function logData(data) {
        document.querySelector('.rating').innerText = counter;

        if (counter < start) {
            counter++;
        }
        else{
            clearInterval(repeater);
        }
    }

<span class='rating'></span>

将JSON数据设置为变量并递增+打印

1 个答案: