Javaスクリプトまたはjqueryを使用してAMとPMに従って特定の時間に各ボタンを起動および停止する方法

Question

私は予定時間管理に取り組んでおり、システムの現在時刻とボタンの値を一致させることでボタンを発光させたい。

例： ボタンの値は3:00 PMです。システム時刻が2:59:59 PM（2時間59分59秒）に達すると、このボタンが点灯します。システム日付が2のときに、値が2:59:59のAMのボタンが点灯しないことを確認します：59：59 PM

時間が午後3時14分59秒に達すると、光るボタンを止めて次のボタンを点灯させてください。

他のボタンと同じです。

注：現在のコードは、デジタル時計の形式でシステムの現在の時刻を表示しており、cssを使用してすべてのボタンを点灯しています。ここで

が私のコードです：

.active{ 
-webkit-animation-name: pulse; 
-webkit-animation-duration: 3s; 
-webkit-animation-iteration-count: infinite; 
} 

計算アクティブにする必要がありますボタン：

var timeformat = hours + ":" + minutes + " " + dd.toUpperCase(); 
var buttons = $('.button'); 
var currentIndex = 0; 
for (var i = 0; i < buttons.length; i++) { 
    if (buttons[i].value > timeformat) { 
    currentIndex = i - 1; 
    break; 
    }; 
} 

追加

var $document = $(document); 
 
(function() { 
 
    var clock = function() { 
 
     clearTimeout(timer); 
 
    
 
     date = new Date();  
 
     hours = date.getHours(); 
 
     minutes = date.getMinutes(); 
 
     seconds = date.getSeconds(); 
 
     dd = (hours >= 12) ? 'pm' : 'am'; 
 
     
 
    hours = (hours > 12) ? (hours - 12) : hours 
 
     
 
     var timer = setTimeout(clock, 1000); 
 
    
 
    $('.hours').html('<p>' + Math.floor(hours) + ':</p>'); 
 
    $('.minutes').html('<p>' + Math.floor(minutes) + ':</p>'); 
 
    $('.seconds').html('<p>' + Math.floor(seconds) + '</p>'); 
 
     $('.twelvehr').html('<p>' + dd + '</p>'); 
 
    }; 
 
    clock(); 
 
})(); 
 

 
(function() { 
 
    $document.bind('contextmenu', function (e) { 
 
    e.preventDefault(); 
 
    }); 
 
})();

@import url(http://fonts.googleapis.com/css?family=Orbitron); 
 
body { 
 
    background-color: #bcc8d1;font-family: 'Orbitron', sans-serif; 
 
    font-size:25px; 
 
    line-height:0px; 
 
    color:white; 
 
    font-weight: 100; 
 
} 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 

 
.desc { 
 
    width:25%; 
 
    margin:auto; 
 
    font-size:11px; 
 
} 
 
.clock { 
 
    top:30%; 
 
    
 
    background-color: #3c434c; 
 
    width:300px; 
 
    height:100px; 
 
    margin:auto; 
 
    padding:20px; 
 
} 
 
.clock div{ 
 
    display:inline-block; 
 
    background-color: #202731; 
 
    width:25%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
    
 

 
.button { 
 
display: inline-block; 
 
padding: 6px 12px; 
 
margin-bottom: 0; 
 
font-size: 14px; 
 
font-weight: 400; 
 
line-height: 1.42857143; 
 
text-align: center; 
 
white-space: nowrap; 
 
vertical-align: middle; 
 
cursor: pointer; 
 
-webkit-user-select: none; 
 
-moz-user-select: none; 
 
-ms-user-select: none; 
 
user-select: none; 
 
background-image: none; 
 
border: 1px solid transparent; 
 
border-radius: 4px; 
 
} 
 

 
.button { 
 
-webkit-animation-name: pulse; 
 
-webkit-animation-duration: 3s; 
 
-webkit-animation-iteration-count: infinite; 
 

 
} 
 

 
.button:hover { 
 
cursor:pointer; 
 
-webkit-animation-name: pulse; 
 
-webkit-animation-duration: .8s; 
 
-webkit-animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes pulse { 
 
from { color:#ccc;background-color: orange; -webkit-box-shadow: 0 0 9px #ccc; } 
 
    50% { color:#fff;background-color: red; -webkit-box-shadow: 0 0 18px #000; } 
 
    to { color:#ccc;background-color: black; -webkit-box-shadow: 0 0 9px #ccc; } 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<input type="button" class="button" href="#" value="2:45 PM"> 
 
     <input type="button" class="button" href="#" value="3:00 PM"> 
 
     <input type="button" class="button" href="#" value="3:00 AM"> 
 
     <input type="button" class="button" href="#" value="3:30 PM"> 
 
     <input type="button" class="button" href="#" value="3:45 PM"> 
 
     <input type="button" class="button" href="#" value="4:00 PM"> 
 
     <input type="button" class="button" href="#" value="4:15 PM"> 
 
     <input type="button" class="button" href="#" value="4:30 PM"> 
 
    <div class="clock" style="margin-left:200px; position:absolute"> 
 
     <div class="hours"></div><!-- 
 
    --><div class="minutes"></div><!-- 
 
    --><div class="seconds"></div><!-- 
 
    --><div class="twelvehr"></div> 
 
</div> 
 

 

Answer 1

まず者は、アクティブなボタンのCSSクラスを作成してみましょうアクティブなクラスを削除するLYそれが変化した場合：

if (currentIndex != tempIndex) { 
    $(buttons[currentIndex]).addClass("active"); 
    $(buttons[tempIndex]).removeClass("active"); 
    tempIndex = currentIndex; //global var store last active index start with -1 
} 

は、このfiddleをチェックし、それが役に立てば幸い！