Post
Ask Question

Display Live Date And Time Using JavaScript and JQuery

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head runat="server">  
  4.         <title>jQuery display current time on webpage</title>  
  5.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
  6.         </script>  
  7.         <script type="text/javascript">  
  8.         // datetime make using jquery  
  9.         $(document)  
  10.             .ready(function ()  
  11.             {  
  12.                 ShowTime();  
  13.             });  
  14.   
  15.         function ShowTime()  
  16.         {  
  17.             var dt = new Date();  
  18.             document.getElementById("lblTime")  
  19.                 .innerHTML = dt.toLocaleTimeString();  
  20.             window.setTimeout("ShowTime()", 1000); // Here 1000(milliseconds) means one 1 Sec  
  21.         }  
  22.         </script>  
  23.         <script>  
  24.         // date time make only javascript  
  25.         function startTime()  
  26.         {  
  27.             var today = new Date();  
  28.             var h = today.getHours();  
  29.             var m = today.getMinutes();  
  30.             var s = today.getSeconds();  
  31.             var d = new Date();  
  32.             var n = d.getDate();  
  33.             var month = new Array();  
  34.             month[0] = "January";  
  35.             month[1] = "February";  
  36.             month[2] = "March";  
  37.             month[3] = "April";  
  38.             month[4] = "May";  
  39.             month[5] = "June";  
  40.             month[6] = "July";  
  41.             month[7] = "August";  
  42.             month[8] = "September";  
  43.             month[9] = "October";  
  44.             month[10] = "November";  
  45.             month[11] = "December";  
  46.             var t = month[d.getMonth()];  
  47.             var y = d.getFullYear();  
  48.             m = checkTime(m);  
  49.             s = checkTime(s);  
  50.             document.getElementById('txt')  
  51.                 .innerHTML = n + "-" + t + "-" + y + " " + h + ":" + m + ":" + s;  
  52.             var t = setTimeout(function ()  
  53.             {  
  54.                 startTime()  
  55.             }, 500);  
  56.         }  
  57.   
  58.         function checkTime(i)  
  59.         {  
  60.             if(i < 10)  
  61.             {  
  62.                 i = "0" + i  
  63.             }; // add zero in front of numbers < 10  
  64.             return i;  
  65.         }  
  66.         </script>  
  67.     </head>  
  68.   
  69.     <body onload="startTime()">  
  70.         <form id="form1">  
  71.             <div> jQuery Display time second by second.  
  72.                 <label id="lblTime" style=" font-weight:bold"></label>  
  73.                 <br>  
  74.                 <br> Javascript Display time second by second. </div>  
  75.             <div>  
  76.                 <div id="txt" style="color:#51545C; float:left; font-size:16px; font-weight:bold; margin-right: 12px;"></div>  
  77.             </div>  
  78.         </form>  
  79.     </body>  
  80.   
  81. </html>