如何递增和递减 pointerdown 和 pointerup 上的进度条值？

Question

目前，我正在尝试编写游戏代码，当指针向下时，进度标签会随着时间慢慢耗尽，而当指针向上时，进度条会从停止时的值慢慢重新填充。

这是我目前的工作逻辑：

HTML:

<progress id="air" max="100" value="100"></progress>

Javascript:

// Javascript
var air = document.querySelector('#air').value;

function drowning(){
  if (air <= 0){
    console.log("You have drowned");
  } else {
    air--;
  }
};

addEventListener('pointerdown', function() {
  var losingair = setInterval(drowning, 250);            
});

addEventListener('pointerup', function() {
  clearInterval(drowning);
  setInterval(gainingair, 200);
  function gainingair() {
    if (air = 100) {
      clearInterval(gainingair); 
    }
    else {
      air++; 
    }
  }
});

Answer 1

不是将 document.querySelector('#air').value 分配给 air 变量，而是只分配 document.querySelector('#air') 部分。并使用 air.value 访问该值。

此外，您以错误的方式清除了间隔。 setInterval() 返回的值用作 clearInterval() 方法的参数。

这是工作代码

var air = document.querySelector('#air');
var losingairInterval, gainingairInterval

function drowning() {
  if (air.value <= 0) {
    console.log("You have drowned");
    clearInterval(losingairInterval);
  } else {
    air.value--;
  }
}

function gainingair() {
  if (air.value == 100) {
    clearInterval(gainingairInterval);
  } else {
    air.value++;
  }
}

addEventListener('pointerdown', function() {
  clearInterval(gainingairInterval);
  losingairInterval = setInterval(drowning, 250);
});

addEventListener('pointerup', function() {
  clearInterval(losingairInterval);
  gainingairInterval = setInterval(gainingair, 200);
});

dispatchEvent(new CustomEvent('pointerdown'))

<progress id="air" max="100" value="100"></progress>

如何递增和递减 pointerdown 和 pointerup 上的进度条值？

How do I increment and decrement a progress bar value on pointerdown & pointerup?

javascript

progress-bar