'2009/07/05'에 해당되는 글 1건

  1. 2009/07/05 시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!
◀ 이전페이지 1 다음페이지 ▶

시계 가젯을 만들어 보고 구글과 블로그에 띄워보자!

자바스크립트 2009/07/05 17:03
TAG , , , , , , , , ,
간단한 시계 가젯을 만들어 보겠습니다. 우선 구글에 로그인하고 구글 가젯 에디터(Google Gadget Editor) 정보 페이지에서 "바로 추가" 버튼을 클릭하면 아이구글(iGoogle)에 가젯을 편집할 수 있는 위젯이 추가 됩니다. 에디터에 아래 보이는 시계 가젯 소스를 입력한 후 적당한 파일명(simpleclock.xml)으로 저장(Save) 하고 발행(Publish) 버튼을 누릅니다.

사용자 삽입 이미지

그리고 "Add to my iGoogle page" 링크를 클릭하면 발행한 가젯을 내 아이구글 페이지에 붙일 수 있습니다. "Publish to iGoogle Directory" 링크를 클릭하면 아이구글 가젯 디렉토리에 발행할 수 있습니다. "Add to a webpage" 링크를 클릭하면 네 홈페이지나 블로그로 가져와서 붙일 수 있는 코드를 생성해 주는 페이지로 이동합니다. 바로 아래 보이는 시계는 완성된 가젯의 코드를 가져와 본 게시물에 코드를 추가해서 보여지는 것입니다. 구글 가젯 개발에 관심이 있는 분은 구글 가젯 API 개발 페이지에서 관련 정보를 확인해보세요.

[시계 가젯 코드 가져와서 띄운 화면]

[시계 가젯을 만들기 위한 소스 코드]
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="HOMPY CLOCK" directory_title="HOMPY CLOCK" description="HOMPY CLOCK" category="tools" screenshot="http://www.hompydesign.com/images/gadget/simpleclock.jpg" thumbnail="http://www.hompydesign.com/images/gadget/simpleclock.jpg" title_url="hompy.info/584" author="hompy" author_email="hompy.info@gmail.com" author_link="http://hompy.info/584" author_location="Korea, Seoul" author_affiliation="hompydesign.com" width="180" height="48" scrolling="false" author_aboutme="web programmer" />
<UserPref name="bgcolor" display_name="배경색" default_value="#99aa99"/>
<UserPref name="datecolor" display_name="날짜색" default_value="#ffffff"/>
<UserPref name="timecolor" display_name="시간색" default_value="darkgreen"/>
<Content type="html">
<![CDATA[
<div id="my_content">
<div id="my_date"></div>
<div id="my_clock"></div>
</div>
<style>
#my_content { font-size : 12px; padding : 5px; background-color:#99aa99;}
#my_date {font-family:verdana,돋음; font-size : 11px; color : #ffffff; padding : 2px; text-align : left; }
#my_clock {font-family:verdana,돋음; font-size : 14px; color : darkgreen; padding : 2px; text-align : center; font-weight : bold; background-color:#ffffff; }
</style>

<script type="text/javascript">
var prefs = new gadgets.Prefs();
function init_clock() {
      var params = {};
      var bgcolor, datecolor, timecolor;
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
      params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 10 * 60;
      bgcolor = prefs.getString("bgcolor");
      datecolor = prefs.getString("datecolor");
      timecolor = prefs.getString("timecolor");
      document.getElementById('my_content').style.backgroundColor = bgcolor;
      document.getElementById('my_date').style.color = datecolor;
      document.getElementById('my_clock').style.color = timecolor;
      print_hour();
      window.setInterval("print_hour()", 100);
}

function print_hour(){
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth()+1;
      var date = today.getDate();
      var hour = today.getHours();
      var min = today.getMinutes();
      var sec = today.getSeconds();
      document.getElementById('my_date').innerHTML = year + '-' + get_number_str(month) + '-' + get_number_str(date);
      document.getElementById('my_clock').innerHTML = get_number_str(hour) + ':' + get_number_str(min) + ' ' + get_number_str(sec);
}

function get_number_str(num){
      if (num<10) num = '0' + num;
      return num;
}

gadgets.util.registerOnLoadHandler(init_clock);
</script>
]]>
</Content>
</Module>

[구글 가젯 에디터]

웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/584
No Trackback, No Comment

댓글을 달아 주세요

◀ 이전페이지 1 다음페이지 ▶