JQuery Live Clock с дополнительными 24 или 12 часов - PullRequest
Новая
       6

JQuery Live Clock с дополнительными 24 или 12 часов

1 голос
/ 25 ноября 2011

Как сделать jQuery only живые часы, которые автоматически загружаются и начинают двигаться, с этой структурой?:

час: минута: секунда

Два столбца каждыйразделяются точкой с запятой, а также имеют универсальный или нет вариант (например, 6 часов против 18 часов).Рядом с ним будет кнопка, которая будет переключаться назад и вперед, говоря «изменить отображение» или что-то в этом роде

Ответы [ 2 ]

9 голосов
/ 25 ноября 2011 
setInterval(function() {
    var date = new Date();
    $('#clock-wrapper').html(
        date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
        );
}, 500);

Это простой пример, чтобы рассказать вам, как это работает.

2 голосов
/ 12 января 2016

Лучший пример здесь - 

$(document).ready(function(){
   setInterval('updateClock()', 1000);
});

function updateClock (){
 	var currentTime = new Date ( );
  	var currentHours = currentTime.getHours ( );
  	var currentMinutes = currentTime.getMinutes ( );
  	var currentSeconds = currentTime.getSeconds ( );

  	// Pad the minutes and seconds with leading zeros, if required
  	currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  	currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  	// Choose either "AM" or "PM" as appropriate
  	var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  	// Convert the hours component to 12-hour format if needed
  	currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  	// Convert an hours component of "0" to "12"
  	currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  	// Compose the string for display
  	var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  	
  	
   	$("#clock").html(currentTimeString);	  	
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="clock"></div>

Источник - http://www.sitepoint.com/create-jquery-digital-clock-jquery4u/
http://demo.tutorialzine.com/2013/06/digital-clock/

...