将滑块重置为初始值

时间:2017-05-22 13:34:49

标签: javascript html

我在HTML文件中定义了这些滑块:

<div>
body angle -180 <input id="bodySlider" type="range"
 min="-180" max="180" step="10" value="0"
  />
 180
</div>
<div id="leftArmSlider">
left arm angle -90 <input id="leftArmSlider" type="range"
 min="-90" max="-20" step="10" value="-20"
  />
 -20
</div>
</div>
<div id="rightArmSlider">
right arm angle 20 <input id="rightArmSlider" type="range"
 min="20" max="90" step="10" value="20"
  />
 90
</div>
<div>
left leg angle -30 <input id="leftLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>
<div>
right leg angle -30 <input id="rightLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>

我希望使用JavaScript文件中的函数将它们重置为初始值。是否有重置功能或其他方法来执行此操作?

2 个答案:

答案 0 :(得分:1)

添加重置按钮。

<input id="reset" type="button" value="Reset">

这是重置功能

document.getElementById('reset').onclick = function(){
   document.getElementById('bodySlider').value = 0;
   document.getElementById('leftArmSlider').value = -20;
   // .... etc
};

确保不在不同的HMTL元素上分配相同的id,id被认为是唯一的。

答案 1 :(得分:0)

另一种方法是将所有输入包装在表单中并重置表单

RunOnUiThread(() => {
  CountSeconds  = CountSeconds  - 1;

  tvTimer.Text = Convert.ToString(CountSeconds );

  if (CountSeconds  == 0)
  {
    CountSeconds  = 3;
    aTimer.Stop();
  }
});