ボタンの色を変更する時間に合わせて

Question

自分のシフトタイミングに従ってボタンの色を変更したい。同様に、朝のシフトの場合、ボタンの色は青色になり、夕方には赤色または異なる色に自動的に変更されます。私は4種類の色が必要です。誰もがこれで私を助けることができますか？以下は

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

Answer 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" />

Answer 2

私はちょうど4セット6時間ごとに24時間を壊してきました。あなたの必要に応じて変更してください。スクリプトを次のように使用してください：

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