オプションの24時間または12時間のjQueryライブクロック

この構造で、自動的にロードされて移動を開始するjQueryののみのライブクロックを作成するにはどうすればよいですか?

時:分:秒

2つの列はそれぞれセミコロンで区切られ、普遍的または非選択的(e'i. 6'o'clock対18'oclock)もあります。それは、 "表示を変える"か何かを前後に切り替えるボタンをその隣に置く

0
「生きている」とはどういう意味ですか?これはjQueryとは何が関係していますか?
追加された 著者 Ilia G,
「jQueryのみ」とはどういう意味ですか?あなたは他のJSライブラリがないのですか?
追加された 著者 Dave Newton,
私は、PHP、基本的なJavaScript、または何かをしたくなかった。ちょうどHTMLとJSライブラリjQuery
追加された 著者 Gᴇᴏᴍᴇᴛᴇʀ,
ライブでは、クロックが始まるようなページを開くとすぐに、アナログ時計のように動作します。
追加された 著者 Gᴇᴏᴍᴇᴛᴇʀ,

2 答え

setInterval(function() {
    var date = new Date();
    $('#clock-wrapper').html(
        date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
        );
}, 500);

これは、どのように動作するかを簡単に示す例です。

9
追加された
@WebMasterこれは合っていませんでしたか?
追加された 著者 pnuts,
1ms間隔ですか?確かに50msはそれ以上のものですか?
追加された 著者 nnnnnn,
あなたが正しいです。私はそれを500msに変更します。
追加された 著者 pnuts,
あなたは秒単位でクロック増分を実現し、1000msは1秒です。
追加された 著者 k4t434sis,

ここのベスト・サンプル -

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$(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>
</div> </div>

Source - http://www.sitepoint.com/create-jquery-digital-clock-jquery4u/
http://demo.tutorialzine.com/2013/06/digital-clock/

1
追加された