admin管理员组

文章数量:1418306

I tried it and searched a while on Google but there are the examples which are very plicated for me. I want to show a clock on my master page which should be dynamically. I am not much familiar with Jquery and all the examples I got there are with Jquery. So is there a simple way for a beginner to use that digital clock on master page. I also want to show the blink of the colon per tick which will separate the time.

I tried it and searched a while on Google but there are the examples which are very plicated for me. I want to show a clock on my master page which should be dynamically. I am not much familiar with Jquery and all the examples I got there are with Jquery. So is there a simple way for a beginner to use that digital clock on master page. I also want to show the blink of the colon per tick which will separate the time.

Share Improve this question asked Nov 15, 2011 at 14:51 avirkavirk 3,0967 gold badges40 silver badges58 bronze badges 2
  • Are you trying to display the server time or the time the client has on his/her machine? – Gjohn Commented Nov 15, 2011 at 14:54
  • I want to show the Client time. – avirk Commented Nov 15, 2011 at 14:56
Add a ment  | 

3 Answers 3

Reset to default 3

Making a simple clock with javascript is not that difficult.

Have a look here for an example: example

I changed the example in the link a little so it's easier to read and perhaps to understand:

  <input type="text" id="clock"/>
  <script type="text/javascript">
    setInterval("settime()", 1000);

    function settime() 
    {
      var dateTime = new Date();
      var hour = dateTime.getHours();
      var minute = dateTime.getMinutes();
      var second = dateTime.getSeconds();

      if (minute < 10)
        minute = "0" + minute;

      if (second < 10)
        second = "0" + second;

      var time = "" + hour + ":" + minute + ":" + second;

      document.getElementById("clock").value = time;
    }
  </script>

You could use an ajax panel. Have a look about the easy to use ajax update panels online and then you could have the clock expand by one second each tick (they have a timer control) although im pretty sure that you could find a freebie somewhere that does something like that for you.

This link seems pretty simple to me.

EDIT

in view of the client side needs and the ment below, you could also try this link

Here is a similar version that does your colon tick. Note that it uses jQuery simply to perform the colon 'fade'.

function clock(){
  var d = new Date();
  var h = d.getHours();
  var m = d.getMinutes();
  var s = d.getSeconds();
  $('#clock').html(h+"<span class='colon'>:</span>"+m+"<span class='colon'>:</span>"+s);
  $('.colon').fadeTo(1000, .2);
  setTimeout(clock, 1000);
}

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

You can modify the values that are inside your message, such as adding a month/day/year, etc simply by using the Date object as I have done.

本文标签: cHow to show a dynamic clock on master pageStack Overflow