当它已经上升时，javascript可以减少html值吗？

Posted 2023-03-05

【中文标题】当它已经上升时，javascript可以减少html值吗？

【英文标题】：Can javascript decrease an html value when it's already going up?

【发布时间】：2022-01-03 04:31:11

【问题描述】：

当值超过 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.valuedeg)`;
  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。 对不起，如果代码很乱，因为我一直在尝试解决这个问题。

【问题讨论】：

如果滑块值略大于 180，比如 180.1，则 neg 方法将其重置为 floor(-180.1 + 180)，即 floor(-0.1)，即 0。为什么是你减去 180？

在滑块上尝试最大值 359，而不是 360。

另一种方法是将范围置于min -180 和max 180 之间。在查看用户体验时也会更有意义。

【参考方案1】：

我认为这可以满足您的需求：

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.valuedeg)`;
  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>

【讨论】：

谢谢！这看起来很简单，我自己找不到。但是你改变的都是“- 360”吗？

基本上，是的。我也删除了 neg() 函数。