时间戳

首页 > 解决方案 > 如何在 Java Script 中使用滑块输入日期

javascript - 如何在 Java Script 中使用滑块输入日期

问题描述

我有一个带有滑块的概念，滑块的每次移动都会改变日期值。

我希望它起到以下作用：

If value = 1Then Day + 1(明天)
If value = 2Then Day + 2(后天)

提前致谢。

<div class="slidecontainer">
  <input onchange='setImage(this)' type="range" min="0" max="8" value="0" step="1" id="myRange" class="slider" />
  <p class="text-slider"> <b>Value : <span id="demo"> </span> (<span id="Date"> </span>)</b></p>
</div>
<script>
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth();
  var yy = date.getYear();
  var year = (yy < 1000) ? yy + 1900 : yy;
  document.getElementById('Date').innerHTML = day + ' ' + months + ' ' + year;
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;
  slider.oninput = function () {
    if (value > 1) { (id = "Date", day + 1) }
    else { }
    output.innerHTML = this.value;
  }
</script>

标签： javascript

解决方案

您必须在滑块中获取值，然后在滑动时将该值添加到日期。此外，您应该检查该值是否大于或等于零，以便当您滑回零时它会返回到当前日期。此外，您必须解析从滑块输入中获得的值，因为它是一个字符串，并且为了将它添加到您需要它是一个数字的日期。请参阅下面的片段：

var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = yy < 1000 ? yy + 1900 : yy;

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var date = document.getElementById("Date");
output.innerHTML = slider.value;
date.innerHTML = day + " " + month + " " + year;
slider.oninput = function(e) {
  let value = parseInt(e.target.value);
  if (value >= 0) {
    date.innerHTML = day + value + " " + month + " " + year;
  } else {}
  output.innerHTML = this.value;
};
<div class="slidecontainer">
  <input onchange="setImage(this)" type="range" min="0" max="8" value="0" step="1" id="myRange" class="slider" />
  <p class="text-slider">
    <b>Value : <span id="demo"> </span> (<span id="Date"> </span>)</b>
  </p>
</div>

推荐阅读