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

How to start and stop glow each button at specific time according to AM and PM using java script or jquery

本文关键字：启动 定时间 按钮 jquery PM AM 何根 使用 java 脚本      更新时间：2023-09-26

我正在研究预约时间管理，并希望通过将系统当前时间与按钮值相匹配来发光按钮。

例如

:有一个按钮的值是下午3点。当系统时间达到2:59:59 PM(2小时59分59秒)时，我想发光这个按钮。当系统日期为2:59:59 PM

时，确保值为2:59:59 AM的按钮不发光

当时间到达3:14:59 PM时，停止发光按钮并启动下一个按钮。

其他按钮也一样。

注:当前代码以数字时钟的形式显示系统当前时间，并使用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>

首先让我们为活动按钮创建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
}

检查这个小提琴，希望它有帮助!

相关文章：