Блог

Главная - Вопросы по программированию - Формат 24H преобразуется на секунду в формат 12H, когда я нажимаю кнопку 12H

Формат 24H преобразуется на секунду в формат 12H, когда я нажимаю кнопку 12H

#jquery

#jquery

Вопрос:

У меня есть две кнопки, одна для преобразования в 24 часа, а другая для преобразования в 12 часов. Когда я нажимаю кнопку 12h, он преобразуется на секунду в формат 12h и возвращается к 24h. например, если его 13:00, он преобразуется в 1: 00 вечера на секунду и возвращается к 13:00. Как я могу сделать так, чтобы он оставался таким же, как 1:00 вечера, и менялся только тогда, когда я нажимаю кнопку 24 часа?

 function clock() {
  var date = new Date();
  var $hour = date.getHours();
  var $minutes = date.getMinutes();

  //Add 0 if hour and minutes are before 10//

  if ($hour < 10) $hour = "0"   $hour;
  if ($minutes < 10) $minutes = "0"   $minutes;

  $("#hour").html($hour);
  $("#minutes").html($minutes);

  //Convert to 12H//
  $("#twelveHourTime").on("click", function() {
    $("#ampm").html("AM");

    if ($hour >= 12) {
      $("#hour").html($hour - 12);
      $("#ampm").html("PM");
    }
  });

  //Convert to 24H//
  $("#twentyFourHourTime").on("click", function() {
    $("#hour").html($hour);
    $("#minutes").html($minutes);
    $("#ampm").html(" ");
  });

};

$(document).ready(function() {
  setInterval('clock()', 1000);
});  
 <div class="main">
  <div class="clock">
    <span id="hour"></span>
    <span id="seconds">:</span>
    <span id="minutes"></span>
    <span id="ampm"></span>
  </div>
  <div class="btn">
    <button id="twentyFourHourTime">24H</button>
    <button id="twelveHourTime">12H</button>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Ответ №1:

вы не хотите, чтобы обработчики щелчков выполняли функцию синхронизации (таким образом, они применяются каждую секунду, достаточно применить их один раз)

Я бы использовал переменную для хранения решения, а в обработчиках щелчков вы просто устанавливаете переменную в соответствии

 var am_pm = false;

function clock() {
  var date = new Date();
  var $hour = date.getHours();
  var $minutes = date.getMinutes();

  //Add 0 if hour and minutes are before 10//

  if ($hour < 10) $hour = "0"   $hour;
  if ($minutes < 10) $minutes = "0"   $minutes;

  // if 12h is true
  if(am_pm){
    $("#ampm").html("AM");
    if($hour >= 12){
      $hour = $hour - 12;
      $("#ampm").html("PM");
    }
  }else{
    $("#ampm").html(" ");
  }

  $("#hour").html($hour);
  $("#minutes").html($minutes);
};

$(document).ready(function() {
  $("#twelveHourTime").on("click", function() {
    am_pm = true;    
  });
  $("#twentyFourHourTime").on("click", function() {
    am_pm = false
  });
  setInterval('clock()', 1000);
});  
 <div class="main">
  <div class="clock">
    <span id="hour"></span>
    <span id="seconds">:</span>
    <span id="minutes"></span>
    <span id="ampm"></span>
  </div>
  <div class="btn">
    <button id="twentyFourHourTime">24H</button>
    <button id="twelveHourTime">12H</button>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Ответ №2:

Вы должны сохранить этап во внешней переменной и проверять каждый раз, когда вы вызываете clock (), какой формат необходим. Кстати: $ в качестве префикса переменной не так часто используется в javascript, как в PHP.

 var twelfHourMode = false;

function clock() 
{
  var date = new Date();
  var hour = date.getHours();
  var minutes = date.getMinutes();

  //Add 0 if hour and minutes are before 10//

  if (hour < 10) hour = "0"   hour;
  if (minutes < 10) minutes = "0"   minutes;

  $("#hour").html(hour);
  $("#minutes").html(minutes);
  $("#ampm").html("");
  if(twelfHourMode)
  {
      $("#ampm").html("AM");
      if ($hour >= 12)
      {
          $("#hour").html(hour - 12);
          $("#ampm").html("PM");
      }
    }
};

$(document).ready(function() 
{
    //Convert to 12H//
    $("#twelveHourTime").on("click", function() 
    {
         twelfHourMode = true;
         clock();
    });

    //Convert to 24H//
    $("#twentyFourHourTime").on("click", function() 
    {
         twelfHourMode = false;
         clock();
    });

    setInterval('clock(' ')', 1000);
});