Javascript если больше, чем ползунок диапазона - PullRequest
Новая
       35

Javascript если больше, чем ползунок диапазона

0 голосов
/ 11 марта 2020

Я пытаюсь сделать так, чтобы на этом слайдере диапазона отображалось «Доброе утро, день, вечер и ночь», а также 4 фотографии, которые меняются при перемещении слайда с 0:00 до 23:00 по военному времени.

Я думаю, что мои утверждения «если, иначе» имеют правильные утверждения «больше или равно», но это не отображает мое утверждение «доброе утро» и фотографию. Также по значению 2 на ползунке он отображает «Добрый вечер» по какой-то странной причине.

Я бы специально хотел добиться этого, используя операторы if для улучшения своих знаний. Любые идеи? Спасибо! 

let photoGallery = new Array();
    photoGallery[0] = "https://img.etimg.com/thumb/msid-66951054,width-643,imgsize-920116,resizemode-4/sunrise.jpg"
    photoGallery[1] = "https://upload.wikimedia.org/wikipedia/commons/0/09/A_good_afternoon_%286933189752%29.jpg"
    photoGallery[2] = "https://cdn.asiatatler.com/asiatatler/i/hk/2018/11/06202142-story-image-14376_cover_2000x1200.jpg"
    photoGallery[3] = "http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg"

let slider = document.querySelector("#myRange");
let output = document.querySelector("#output")
output.innerHTML = slider.value + ":00";

slider.oninput = function() {
  output.innerHTML = this.value + ":00";

  // var time = document.querySelector("#myRange").value;
  var time = $(this).val();
  $('#sliderStatus').html( $(this).val() );
  if (time >= "6" && time < "12") {
    document.querySelector(".greeting").innerHTML = "Good Morning!"
    $("#sliderimg").prop("src", photoGallery[0]);
  }
  else if (time >= "12" && time < "18") {
    document.querySelector(".greeting").innerHTML = "Good Afternoon!"
    $("#sliderimg").prop("src", photoGallery[1]);
  }
  else if (time >= "18" && time < "21") {
    document.querySelector(".greeting").innerHTML = "Good Evening!"
    $("#sliderimg").prop("src", photoGallery[2]);
  }
  else if (time >= "0" && time < "6"){
    document.querySelector(".greeting").innerHTML = "Good Night!"
    $("#sliderimg").prop("src", photoGallery[3]);
  }

Мой код: https://codepen.io/stanimal93/pen/poJaVrz

Ответы [ 2 ]

3 голосов
/ 11 марта 2020

Ваши условия сравнивают строки, конвертируют их в целые числа. 

  if (parseInt(time) >= 6 && parseInt(time)< 12) {
    document.querySelector(".greeting").innerHTML = "Good Morning!"
    $("#sliderimg").prop("src", photoGallery[0]);
  }
0 голосов
/ 11 марта 2020

Вы сравниваете строки, которые не приводят к тому же результату, что и сравнение чисел. 

// Convert the String to a Number
var time = parseInt($(this).val(), 10);

Вы можете затем удалить кавычки в ваших условиях: 

if (time >= 6 && time < 12)

В итоге вы получите: 

$(document).ready(function() {
  let photoGallery = [
    "https://img.etimg.com/thumb/msid-66951054,width-643,imgsize-920116,resizemode-4/sunrise.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/0/09/A_good_afternoon_%286933189752%29.jpg",
    "https://cdn.asiatatler.com/asiatatler/i/hk/2018/11/06202142-story-image-14376_cover_2000x1200.jpg",
    "http://sarahstup.com/wp/wp-content/uploads/2017/01/night-time-background.jpg"
  ];
  let slider = document.querySelector("#myRange");
  let output = document.querySelector("#output");
  output.innerHTML = slider.value + ":00";

  slider.oninput = function() {
    output.innerHTML = this.value + ":00";

    var time = parseInt($(this).val(), 10); // <------------
    $('#sliderStatus').html($(this).val());
    if (time >= 6 && time < 12) {
      document.querySelector(".greeting").innerHTML = "Good Morning!"
      $("#sliderimg").prop("src", photoGallery[0]);
    } else if (time >= 12 && time < 18) {
      document.querySelector(".greeting").innerHTML = "Good Afternoon!"
      $("#sliderimg").prop("src", photoGallery[1]);
    } else if (time >= 18 && time < 21) {
      document.querySelector(".greeting").innerHTML = "Good Evening!"
      $("#sliderimg").prop("src", photoGallery[2]);
    } else if (time >= 0 && time < 6) {
      document.querySelector(".greeting").innerHTML = "Good Night!"
      $("#sliderimg").prop("src", photoGallery[3]);
    }
  };
});
...