12 hour clock by jquery and js || floating clock by jqueryui

   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

  $( function() {

    $( "#dialog" ).dialog();

  } );

  

    setInterval(function(){

        var time= new Date();

     if(time.getHours()>=12)

     {

       var hh=time.getHours()-12;

     }

   $("#time").text(hh+":"+time.getMinutes()+":"+time.getSeconds());

 

    },1000);

    

  </script>

<div id="dialog" title="Basic dialog">

    <h1 id="time"> </h1>

 </div>