Попытка изменить цвет фона на основе, если час в прошлом, текущем или будущем - PullRequest
Новая
       1

Попытка изменить цвет фона на основе, если час в прошлом, текущем или будущем

2 голосов
/ 31 января 2020

Я пытаюсь изменить цвет фона в зависимости от того, истек ли текущий час, настоящий или в будущем.

Вариант использования: я строю ежедневник, используя момент. js. Каждый час имеет свое поле, ie: 8 утра, 9 утра, 10 утра. Если текущее время - 10:15, я хочу, чтобы 9 утра было серым, 10 утра - красным, а 11 утра - 6 вечера - зеленым.

Я могу получить текущий час с помощью console.log (currentTime)

Я просто пытаюсь выяснить, как создать функцию, которая изменяет цвет фона класса. Любая помощь будет принята с благодарностью. 

//current date and time

$("#currentDay").text(moment().format('ddd, MMM Do'));

//currentTime to determine if the hour matchs for color
var currentTime = moment().format('H');
console.log()

//todo project
// Use window.localStoirage to retreve and store your data object as string
const LS = JSON.parse(localStorage.scheduler || '{}'); // now an Object

// double click makes calender content editable

$(".textData").dblclick(function () {
    $(this).addClass('d-none')
    $(this).siblings("input").removeClass("d-none");
});

$(".btn").dblclick(function () {
    console.log(this);
    console.log($(this).attr("id"))
    var id = $(this).attr("id")
    var time = id.slice(0,3)
    console.log(time)

    var timeInputId = time + "Input"; 
});





// save makes edit end



// set active time



// make background color of / past hours gray / current hour red / future hours green
var hourPast = hourPast < currentTime;
var hourNow = currentTime;
var hourFuture = hourFuture < currentTime;

// if currentTime > hourNow make background color gray//


    var hourNow = currentTime;
console.log(hourNow)
console.log(currentTime)
    function backgroundColorEdit(){
        if (hourNow == currentTime){
            document.getElementsByClassName("backgroundTool").style.backgroundColor = "#ff0000";
        }else if (hourNow < currentTime){
            document.getElementsByClassName("backgroundTool").style.backgroundColor = "#d3d3d3";
        }else 
        {
            document.getElementsByClassName("backgroundTool").style.backgroundColor = "#90ee90";
        }
}
// if currentTime = hourNow make background color Red //

// if currentTime < hourNow make background color green //
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea{
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description{
  white-space: pre-wrap;
}

.time-block{
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06AED5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all .3s ease-in-out;
}


.red {
  background-color: red;

}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
      rel="stylesheet"
    />
     <link rel="stylesheet" href="style.css" />
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>Work Day Scheduler</title>
  </head>
   
  <body>
    <header class="jumbotron">
      <h1 class="display-3">Work Day Scheduler</h1>
      <p class="lead">A simple calendar app for scheduling your work day</p>
      <p id="currentDay" class="lead"></p>
    </header>
    <div class="container">
      
      <!-- Timeblocks go here -->
     
      <div class="row">
        <div class='col-2 hour'> 9am
        </div>
      
        <div class="col-8 description backgroundTool border-bottom scheduler">
          <span class="textData 9amSpan">text here </span>
          <input id="9amInput " class="d-none border-0 form-control textarea bg-transparent am9Input" type="text" placeholder="Default input">
        </div>
        <div class="col-2 saveBtn">
          <button type="submit" id="9amButton" class="btn btn-primary mb-2 am9Button">Save</button>
       </div>
      </div>
    

    <div class="row">
      <div class='col-2 hour'> 10am
      </div>
    
      <div class="col-8 description backgroundTool border-bottom scheduler">
        <span class="textData 10amSpan">text here </span>
        <input id="10amInput" class="d-none border-0 form-control textarea bg-transparent am10Input" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" id="10amButton" class="btn btn-primary mb-2 am10Button">Save</button>
     </div>
    </div>



    <div class="row">
      <div class='col-2 hour'> 11am
      </div>
    
      <div class="col-8 description backgroundTool border-bottom scheduler">
        <span class="textData 11amSpan">text here </span>
        <input id="11amInput" class="d-none border-0 form-control textarea bg-transparent am11Input" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" id="11amButton" class="btn btn-primary mb-2 am11Button">Save</button>
     </div>
    </div>





    <div class="row">
      <div class='col-2 hour'> 12pm
      </div>
    
      <div class="col-8 description backgroundTool border-bottom scheduler">
        <span class="textData 12pmSpan">text here </span>
        <input id="12pmInput" class="d-none border-0 form-control textarea bg-transparent pm12Input" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" id="12amButton" class="btn btn-primary mb-2 pm12Button">Save</button>
     </div>
    </div>


    <div class="row">
      <div class='col-2 hour'> 1pm
      </div>
    
      <div class="col-8 description backgroundTool border-bottom scheduler">
        <span class="textData 1pmSpan">text here </span>
        <input id="1pmInput" class="d-none border-0 form-control textarea bg-transparent pm1Input" type="text" placeholder="Default input">
      </div>
      <div class="col-2 saveBtn">
        <button type="submit" id="1pmButton" class="btn btn-primary mb-2 pm1Button">Save</button>
     </div>
    </div>




  </div> 
    
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="script.js"></script>

  </body>
</html>

1 Ответ

0 голосов
/ 31 января 2020

Вот идея (использующая упрощенную версию разметки), которая использует 24-часовое время для сравнения, как вы думали.

Каждая строка получает id, указывающий, какой час она представляет, что упрощает сравнение соответствующего часа с текущим часом. 

const rows = document.getElementsByClassName("row");
let currentHour = parseInt(moment().format('H'));

Array.from(rows).forEach(row => {
  let
    rowIdString = row.id,
    rowHour;
  if (rowIdString) {
    rowHour = parseInt(rowIdString);
  }
  if (rowHour) {
    // Compares row id to current hour and sets color accordingly
    if (currentHour === rowHour) {
      setColor(row, "red");
    } else if ((currentHour < rowHour) && (currentHour > rowHour - 6)) {
      setColor(row, "green");
    } else if ((currentHour > rowHour) && (currentHour < rowHour + 6)) {
      setColor(row, "lightgrey");
    } else {
      setColor(row, "white");
    }
  }
});

function setColor(element, color) {
  element.style.backgroundColor = color;
}
.row {
  padding: 0.5em;
  margin-bottom: 0.4em;
  border: 1px solid gray;
  border-radius: 0.5em;
}
<html lang="en">

<body>
  <div class="row" id="9">
    <span> 9am </span>
    <span> -- text here -- </span>
    <button id="9amButton">Save</button>
  </div>

  <div class="row" id="10">
    <span>10am </span>
    <span> -- text here -- </span>
    <button id="10amButton">Save</button>
  </div>

  <div class="row" id="11">
    <span>11am </span>
    <span> -- text here -- </span>
    <button id="11amButton">Save</button>
  </div>

  <div class="row" id="12">
    <span>12pm </span>
    <span> -- text here -- </span>
    <button id="12pmButton">Save</button>
  </div>

  <div class="row" id="13">
    <span> 1pm </span>
    <span> -- text here -- </span>
    <button id=" 1pmButton">Save</button>
  </div>

  <div class="row" id="14">
    <span> 2pm </span>
    <span> -- text here -- </span>
    <button id=" 2pmButton">Save</button>
  </div>

  <div class="row" id="15">
    <span> 3pm </span>
    <span> -- text here -- </span>
    <button id=" 3pmButton">Save</button>
  </div>

  <div class="row" id="16">
    <span> 4pm </span>
    <span> -- text here -- </span>
    <button id=" 4pmButton">Save</button>
  </div>

  <div class="row" id="17">
    <span> 5pm </span>
    <span> -- text here -- </span>
    <button id=" 5pmButton">Save</button>
  </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...