Home/ Questions/Q 9112341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T03:42:45+00:00

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

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0