當html值已經上升時，javascript可以減少它嗎？

我找不到當值超過 180 時的方法（使用 if 陳述句），它開始下降為負數，例如：當值超過 180 時，id 為“text”的元素變為 -179然后隨著滑塊走得更遠，它變為 -1。這是我的代碼；

var slider = document.getElementById("slider");

slider.addEventListener('input', () => {

  document.getElementById("text").innerHTML = slider.value;
  document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
  var tv = document.getElementById("text").innerHTML;
  if (slider.value > 180) {
    neg();
  }; //else when it goes back
  function neg() { //stack overflow how to
    document.querySelector("#text").innerHTML = Math.floor(-slider.value   360 / 2);
  }
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#outer {
  background: red;
  height: 20vw;
  position: relative;
  border-radius: 50%;
  width: 20vw;
  display: flex;
  justify-content: center;
}

#inner {
  transform: rotateZ(180deg) translateY(10%);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  position: absolute;
  top: 0;
  background: darkgreen;
  width: 10%;
  height: 50%;
}

#text {
  text-align: center;
  width: 3ch;
}

.item {
  border: 2px solid black;
}

<div class="item" id="outer">
  <div id="inner"></div>
</div>
<input class="item" value="0" min="0" max="360" type="range" id="slider">
<div id="text" class="item" style="background-color:lightgrey;padding-inline:1vw;border-radius:10%;border:1vh solid black;">
  0
</div>

現在，它重置為 -0 而不是 -179。對不起，如果代碼很亂，因為我一直在嘗試解決這個問題。

uj5u.com熱心網友回復：

我認為這可以滿足您的要求：

if (slider.value > 180) {
    document.querySelector("#text").innerHTML = slider.value - 360;
  };

當slider.value > 180后，顯示值切換到slider.value - 360。

slider.value = 181 then display value is 181 - 360 = -179
slider.value = 182 then display value is 182 - 360 = -178
slider.value = 183 then display value is 183 - 360 = -177
...

var slider = document.getElementById("slider");

slider.addEventListener('input', () => {

  document.getElementById("text").innerHTML = slider.value;
  document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
  var tv = document.getElementById("text").innerHTML;
  if (slider.value > 180) {
    document.querySelector("#text").innerHTML = slider.value - 360;
  };
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#outer {
  background: red;
  height: 20vw;
  position: relative;
  border-radius: 50%;
  width: 20vw;
  display: flex;
  justify-content: center;
}

#inner {
  transform: rotateZ(180deg) translateY(10%);
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  position: absolute;
  top: 0;
  background: darkgreen;
  width: 10%;
  height: 50%;
}

#text {
  text-align: center;
  width: 3ch;
}

.item {
  border: 2px solid black;
}

<div class="item" id="outer">
  <div id="inner"></div>
</div>
<input class="item" value="0" min="0" max="360" type="range" id="slider">
<div id="text" class="item" style="background-color:lightgrey;padding-inline:1vw;border-radius:10%;border:1vh solid black;">
  0</div>

標籤：javascript html css dom

上一篇：僅在單擊事件時洗掉輪廓

下一篇：并非所有資料都顯示在陣列中