Demo display of clock by a button control using Jquery

We have seen how to display a real time clock in JavaScript in Part 1. Now we will try to manage the display of the clock by controlling it through a button using JQuery.

Here is the demo

Here is the code.

<html>

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#ct").toggle();
  });
});

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}

function display_ct() {
var strcount
var x = new Date()
document.getElementById('ct').innerHTML = x;
tt=display_c();
 }
</script>

</head>
<body onload=display_ct();>

<button id='bt'>Clock</button><br>
<span id='ct' ></span>
</body>
</html>

Date Reference Showing Changing Clock

Subscribe to our YouTube Channel here

Toggle display of clock by a button using Jquery

Here is the demo

Subscribe