구글 가젯 만들기, Part 1: 구글 가젯 기본요소 (한글)

                    
<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Current time" author="John Muchow"
                  description="Gadget to demonstrate stuff"  height="30"/>

  <ModulePrefs title="The time in __UP_sName__'s world" />
  <UserPref name="sName" display_name="Your name" required="true" />
  <UserPref name="eBackgroundcolor" display_name="Background color"
                    default_value="Blue" datatype="enum" >
    <EnumValue value="Red" />
    <EnumValue value="Green" />
    <EnumValue value="Blue" />
  </UserPref>

  <Content type="html">
  <![CDATA[

    <!-- Set div.  Text below is shown while clock is getting/formatting time -->
    <div id="content_div" style="font-size:12px; font-family:Arial, Helvetica;
      font-weight:bold; color:white; text-align:center;">

    Formatting the time, please wait...

    <script type="text/javascript">

      // Get user preferences
      var userprefs = new _IG_Prefs(__MODULE_ID__);

      // Set user specified preference for background color
      var element = document.getElementById('content_div');
      element.style.backgroundColor = userprefs.getString('eBackgroundcolor');

      // The clock
      var clock = _gel('content_div');

      // Called repeatedly to update the clock
      function showClock()
      {
        var date = new Date();
        var hour = date.getHours();
        var min = date.getMinutes();
        var countdown = date.getSeconds();
        var indicator;
        var displaytime;

        // Check for am or pm
        if (hour > 12)
        {
          hour -= 12;
          indicator = 'pm';
        }
        else
          indicator = 'am';

        // Add leading 0 to minutes, if necessary (e.g. 09 minutes)
        if (min < 10)
          min = '0' + min;

        // Convert seconds (1 2 3...) to countdown (59 58 57...)
        countdown = (60 - countdown);

        // Create string that will be displayed
        displaytime = hour + ':' + min + ' ' + indicator + ' - ' + countdown + ' seconds';

        // Display time
        clock.innerHTML = displaytime;
      }

      // Every second (1000 milliseconds), update the window/clock.
      window.setInterval("showClock()", 1000);

    </script>

    ]]>
    </Content>
</Module>