Question

我正在制作一个使用纯JavaScript添加到日期的滑块。我需要滑块才能将元素的值添加到日期。

例如，如果滑块的值为24，则需要在日期上添加24天。

我尝试将其添加到Cheerio函数中，但是所有操作都是将其添加到字符串中。然后，我尝试使用getDate()将滑块的值变成整数，但是当我将值添加到天数后，它又将天数变成整数。

parseInt()

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');
var today = new Date();
var sliderAdded = today;
var day = sliderAdded.getDay();
var month = sliderAdded.getMonth();
var date = sliderAdded.getDate() + sliderDate.value;
var daysOfWeek = [
  "N/A",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday"
];
var nameOfMonths = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var sliderDateValue = sliderDate.value;

//connection between slider and input textbox
outputDate.value = sliderDate.value;

sliderDate.oninput = function() {
  outputDate.value = this.value;

};
outputDate.oninput = function() {
  sliderDate.value = this.value;
};

function dateBoundries() {
  if (outputDate.value > 35) {
    outputDate.value = 35;
  } else if (outputDate.value < 0) {
    outputDate.value = 0;
  } else {}
}

if (date == 1 || date == 21 || date == 31) {
  suffix = "st ";
} else if (date == 2 || date == 22) {
  suffix = "nd ";
} else if (date == 3 || date == 23) {
  suffix = "rd ";
} else {
  suffix = "th ";
}

document.getElementById('dateTest').innerHTML =
  daysOfWeek[day] +
  " " +
  date +
  suffix +
  " " +
  nameOfMonths[month] +
  " " +
  today.getFullYear();

Answer 1

var sliderDate = document.getElementById('dateSlider');
var outputDate = document.getElementById('dateOutput');

var daysOfWeek = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
var nameOfMonths = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

var sliderDateValue = sliderDate.value;



//connection between slider and input textbox
outputDate.value = sliderDate.value;

sliderDate.oninput = function() {
  var today = new Date();
  today.setDate(today.getDate() + Number(this.value));
  outputDate.value = this.value;
  formattedDate(today)

};
outputDate.oninput = function() {
  var today = new Date();
  today.setDate(today.getDate() + Number(this.value));
  sliderDate.value = this.value;
  formattedDate(today)
};


function dateBoundries() {
  if (outputDate.value > 35) {
    outputDate.value = 35;
  } else if (outputDate.value < 0) {
    outputDate.value = 0;
  } else {}
}



function formattedDate(dateN) {
  var date = dateN.getDate()
  if (date == 1 || date == 21 || date == 31) {
    suffix = "st ";
  } else if (date == 2 || date == 22) {
    suffix = "nd ";
  } else if (date == 3 || date == 23) {
    suffix = "rd ";
  } else {
    suffix = "th ";
  }
  document.getElementById('dateTest').innerHTML =
    daysOfWeek[dateN.getDay()] +
    " " +
    date +
    suffix +
    " " +
    nameOfMonths[dateN.getMonth()] +
    " " +
    dateN.getFullYear();
}

formattedDate(new Date());

</h1> <span id="dateTest"></span>
<input type="textbox" id="dateOutput" onfocusout="dateBoundries()"><br>
<input type="range" min="0" max="35" value="1" class="slider" id="dateSlider">
<br>

根据您的问题，我已尝试插入逻辑。请让我知道是否满意。在您的代码中，计算周数时会出错，请记住周从星期日开始。

Answer 2

<h1>
   <span id="dateTest"></span>
   <input type="textbox" id="dateOutput"  onfocusout="dateBoundries()"><br>
   <input type="range" min="1" max="35" value="1" class="slider" id="dateSlider" onchange="dateOutput.value = parseInt(dateOutput.value) + parseInt(dateSlider.value);"><br>
</h1>

滑块值增加到日期

2 个答案: