iGoogle Gadget -18

■　カウントダウンカレンダーです。
■　指定期日を設定します。
■　当日と指定日前後の期間ではそれぞれ表示を変えています。
■　背景色が選べます。
■　サンプルです。　

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="カウントダウン" title_url="http://www5d.biglobe.ne.jp/~pog/" height="100" scrolling="false" />
   <UserPref name="targetDay" display_name="タイトルの設定" default_value="試作品の発表" datatype="string" />
   <UserPref name="year" display_name="年" default_value="2010" datatype="string" />
   <UserPref name="month" display_name="月" default_value="12" datatype="string" />
   <UserPref name="day" display_name="日" default_value="6" datatype="string" />
   <UserPref name="mycolor" display_name="Color" default_value="Lime" datatype="enum">
     <EnumValue value="Red" />
     <EnumValue value="Aqua" />
     <EnumValue value="Lime" />
     <EnumValue value="Yellow" />
     <EnumValue value="Pink" />
     <EnumValue value="Orange" />
     <EnumValue value="White" />
</UserPref>
  <Content type="html">
  <![CDATA[
<div id="bg">
<style type="text/css">
div#date{
padding-left:0;
font-size:11px;
font-weight:400;
color:skyblue;
}
</style>
<div id="date">
<SCRIPT type="text/JavaScript"><!--

now = new Date();
str = now.getFullYear()+"/";
str+= now.getMonth()+1+"-";
str+= now.getDate()+"";
document.write(str + "/");

now = new Date();
str = now.getHours()+":";
str+= now.getMinutes()+"";
document.write(str);

//--></SCRIPT>
</div>

  <script type="text/javascript">
    var prefs = new gadgets.Prefs();
    var element = document.getElementById('bg');
    element.style.height=150;
    element.style.backgroundColor=prefs.getString("mycolor");
</script>

<script language="JavaScript"><!--

function xDay(y){

    var prefs = new gadgets.Prefs();
    var y = prefs.getString("year");
    var m = prefs.getString("month");
    var d = prefs.getString("day");
    var theDay = prefs.getString("targetDay");
    var html ="";

    var now = new Date();
    var point = new Date(y,m-1,d);
    var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
    var countup = 0 - countdown;

    var before;
    var today;
    var after;
    var html = document.getElementById("DisplayxDay");

if(countdown > 0) {
   before =  document.write('<h2><font color="orange">' + countdown + '日前だよ！' + '</h2></font>');
  }
else if(countdown == 0) {
   today= document.write('<h2><font color="blue">' + '今日だよ！' + '</h2></font>');
  }
else {
   after= document.write('<h2><font color="red">' + countup + '日過ぎちゃった！' + '</h2></font>');
  }

}

    html.innerHTML += "before + today + after";

// -->
</script>

<div id="DisplayxDay"></div>
<p align="center" />

<u>__UP_targetDay__の日 ； __UP_year__年__UP_month__月__UP_day__日</u>

<div style="text-align:center" />
<script type="text/javascript">
xDay()
</script>
</div>
  ]]>
  </Content>
</Module>

■　編集用リンク