CODEWITHSUNDEEP
javascriptclock
swankyprogramming
swankyprogramming

Reputation: 107

jquery digital clock

I am trying to use the example based here: http://www.techtricky.com/jquery-code-to-show-time-in-different-countries/

However I am new to JS and am having trouble. I am basically trying to get it to show the time without the select box.

I will then be trying to show multiple different times at once.

e.g.

+------------------+ | 10:14:14 pm | | 08:14:14 pm | | 06:14:14 pm | +------------------+

I realise that the var options allows me to set the style and the time offset. However the function is the bit I am confused. I've been trying to set the #zones to automatically run but can't get it to without having to select something. (ideally I wouldn't have the select in there at all, I tried setting a default to the zones select but that didn't work either) I think it's because the function has $("#zones").change so will only run on a change.

TIA!

Upvotes: 0

Views: 2375

Answers (2)

geniuscarrier
geniuscarrier

Reputation: 4249

You may interest in this one: Raphael - Polar Clock

Upvotes: 1

Tomer Arazy
Tomer Arazy

Reputation: 1823

You could do something ugly like that Obviously you can do it in a loop or something so you don't have to write your code 3 times like I did here

Also - There are few examples in the jclock documentation : https://sites.google.com/site/jqueryjclockjs/

    <html>
      <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://techtricky.com/wp-content/jquery/jquery.jclock.js"></script>
      <script type="text/javascript">
        $(document).ready(
            function() {
           $('#time-cont1').append('<div class="time"></div>');
               var options = {
                format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
                timeNotation: '12h',
                am_pm: true,
                fontFamily: 'Verdana, Times New Roman',
                fontSize: '20px',
                foreground: 'black',
                background: 'yellow',
                utc:true,
                utc_offset: 8
              }

              $('#time-cont1 .time').jclock(options);
              $('#time-cont2').append('<div class="time"></div>');
               var options = {
                format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
                timeNotation: '12h',
                am_pm: true,
                fontFamily: 'Verdana, Times New Roman',
                fontSize: '20px',
                foreground: 'black',
                background: 'yellow',
                utc:true,
                utc_offset: 6
              }

              $('#time-cont2 .time').jclock(options);
              $('#time-cont3').append('<div class="time"></div>');
               var options = {
                format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>',
                timeNotation: '12h',
                am_pm: true,
                fontFamily: 'Verdana, Times New Roman',
                fontSize: '20px',
                foreground: 'black',
                background: 'yellow',
                utc:true,
                utc_offset: -5
              }

              $('#time-cont3 .time').jclock(options);
         });
        </script>

      </head>
      <body>
        Country1: <div id="time-cont1"></div>
        Country2:  <div id="time-cont2"></div>
        Country3: <div id="time-cont3"></div>
      </body>
    </html>

Upvotes: 1

Related Questions