CODEWITHSUNDEEP
jqueryhtmlcss
Akash Dhingra
Akash Dhingra

Reputation: 21

Change Color Of button According to time

I want to change the color of button according to my shift timings. Likewise if it's a morning shift going the button color should be blue and in the evening it should automatically change to red or any different color. I need four different colors. Can anyone help me in this?

$(document).ready(function(){
  $("#hex").on('change', function(){  
    var hex = $("#hex").val();
    $("#btn").css({"background-color":hex});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="hex" />
<input type="button" id="btn" />

Upvotes: 0

Views: 190

Answers (2)

Gyan
Gyan

Reputation: 508

I have just break the 24 hours in four set each of 6 hours. Change as per your need. Use script as :

$(document).ready(function() {
 var hours = new Date().getHours();
 var color = '';
 if (hours <= 6)
   color = '#f00';
 else if (hours > 6 && hours <= 12)
   color = '#0f0';
 else if (hours > 12 && hours <= 18)
   color = '#00f';
 else if (hours > 18 && hours <= 24)
   color = '#ff0';
 $("#btn").css({"background-color": color});
});

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

Below is the sample code to help you. Just get the hours from the Date(), use the if-else condition or switch-case and add the colors that you want: 

$(document).ready(function() {
  var hours = new Date().getHours();
  var color = '#d00';
  if (hours < 12)
    color = '#FFF';
  else if (hours > 12 && hours < 15)
    color = '#000';
  $("#btn").css({
    "background-color": color
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="hex" />
<input type="button" id="btn" />

Upvotes: 1

Related Questions