javascript - 如何使用java脚本或jquery根据AM和PM在特定时间启动和停止发光每个按钮

Question

我正在从事预约时间管理，希望通过将系统当前时间与按钮值相匹配来点亮按钮。

例如:有一个按钮的值为 3:00 PM。我想在系统时间达到 2:59:59 PM(2 小时 59 分 59 秒)时点亮此按钮。确保值 2:59:59 AM 的按钮在以下情况下不发光系统日期为 2:59:59 PM

当时间到达下午 3:14:59 时，停止发光按钮并开始点亮下一个按钮。

其他按钮也一样。

注意:当前代码以数字时钟的形式显示系统当前时间，并使用CSS发光所有按钮。

这是我的代码:

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 类:

.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;
  };
}

仅在事件类发生更改时添加和删除事件类:

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

检查这个fiddle ，希望对您有帮助!