2017-07-05 40 views
0

我想改變按鈕的顏色根據我的班次時間。同樣,如果是早班,按鈕顏色應該是藍色,並且在晚上它應該自動變爲紅色或任何不同的顏色。我需要四種不同的顏色。任何人都可以幫助我嗎?更改顏色的按鈕根據時間

$(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" />

+2

目前還不清楚你在問什麼。你的意思是客戶機上的時間是在晚上?應該使用什麼四種顏色?你只說過有兩次改變...?這沒有任何意義。 –

+0

我需要一個按鈕,其顏色根據系統時間自動改變......早班第一顏色晚班第二顏色夜班第三顏色和夜班第四顏色,以便用戶可以瞭解當前正在進行的班次。而四種顏色是......綠色藍色,紅色,黃色 –

+0

我們應該如何知道這些變化是多少次? –

回答

1

下面是示例代碼,以幫助您。從Date()剛拿到小時,使用if-else條件或switch-case,並添加你想要的顏色:

$(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" />

0

我剛纔破四的24小時內設置每個6小時。根據您的需要更改。使用腳本如下:

$(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}); 
});