クリスマス、新年、お好みの日をカウントダウン表示させよう

最近カウントダウンの需要が高いようなのでJavaScriptを紹介しておこう。クリスマスや年越し・お誕生日など、設置も簡単なので、お好きなように改造してどぞ。

これは、本当に貼った例。

表示サンプル例。日付によって4種類の表示ができるようにしています。

目標までカウントダウン
2007年まで、あと00日です
目標の前日
今日はいよいよ大晦日ですね
目標の日
新年あけましておめでとうございます
目標から何日経過
2007年を迎えて00日経ちました。

JavaScriptを貼れるブログなら、以下をずらっとマウスで選択、「コピー」して貼り付けたい場所に「貼り付け」するだけで動作します。

<script language="JavaScript"><!--
var now = new Date();
var point = new Date(2007,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
var countup = 0 - countdown;

if(countdown > 1) {
document.write('<br><span style="color:hotpink;font-weight:bold;"></span>2007年まで、あと', countdown ,'日です<span style="color:hotpink;font-weight:bold;"></span><br>');
}
else if(countdown == 1) {
document.write('<br><span style="color:darkturquoise;font-weight:bold;"></span>今日はいよいよ大晦日ですね<span style="color:darkturquoise;font-weight:bold;"></span><br>');
}
else if(countdown == 0) {
document.write('<br><span style="color:springgreen;font-weight:bold;"></span>新年あけましておめでとうございます<span style="color:springgreen;font-weight:bold;"></span><br>');
}
else {
document.write('<br><span style="color:darkorange;font-weight:bold;"></span>2007年を迎えて', countup ,'日経ちました。<span style="color:darkorange;font-weight:bold;"></span><br>');
}
// --></script>
【お好み設定】
赤文字部分がカウントダウンしたい日付。上のサンプルは2007年の11日に設定しています。他にもクリスマスとか誕生日など、お好きなように。
青文字部分は表示される文章。こっちもお好みで変更可能。「''」単位の「,」区切りで順序も変えることができます。
緑文字部分は、改行(<br>)部分。実際に表示される文章の前後を改行ナシで表示したかったら削除してください。
ピンク文字部分は色やスタイルを変えた見本。はさんで使います。上の例では★がそれぞれの色に変わっています。このタグを使って好きな場所を好きな色に。

ありゃ、いろいろ盛り込んだらわかりにくい?そんな方は、もっとシンプルな元ネタさん、All Aboutの「ページ作成TIPS [10] 新年まで毎日カウントダウン」へどうぞ。

【色の参考に】
WEB COLOR 216Web Color 以外の色- 色名指定が可能な色の見本 -
関連記事
  • このエントリーをはてなブックマークに追加

みんなの声

mandom Advent Calendar 2005

こんにちは。りょーちと申します。
連続コメントもうしわけありません。
昨年も実施していたのですが、マンダムさんが期間限定でアドベントカレンダーのバナーを配布するようです。
http://www.mandom.co.jp/advent/
去年も張ってみたのですが、結構クリスマスまで楽しめます。
バナーがカウントダウンされるだけでなく、リンク先で日替わりでflashによる楽しいイベントがあるようです。

ご参考まで。ではでは。

  • りょーち
  • 2005.11.26
  • Sat
  • No.1019

>りょーちさん

りょーちさんのおかげで、来週もうちは安泰です^^
これ、ほんとにかわいいですね。サンタ続きで先に紹介させていただこうかな。ほんとにありがとうございます。

  • satokoto
  • 2005.11.27
  • Sun
  • No.1025
  • edit ]

はじめまして~

はじめまして~
はじめてのコメントですが、いつも大変お世話になっています。
是非、このカウントダウンのスクリプト、使わせて下さい!
これからも、応援してますので
どうぞ頑張って下さいね!

  • C9PYON
  • 2005.12.10
  • Sat
  • No.1091
  • edit ]

C9PYONさん

こちらこそ、嬉しいコメントありがとうございます。がんばります^^

  • satokoto
  • 2005.12.11
  • Sun
  • No.1095
  • edit ]

はじめまして。

v-20はじめまして。
カウントダウン貼り付けました。
お友達の所でも、同じ物ありました。
また、寄らせて頂きますね。

じっくり拝見して勉強させて頂きますね。
v-354

  • マリリン☆
  • 2005.12.28
  • Wed
  • No.1214
  • edit ]

マリリン☆さんへ

こちらこそはじめまして・・・とブログにお邪魔したらステキなお天気アイコンみつけてしまいましたv-10(dynaweather.com)

  • satokoto
  • 2005.12.29
  • Thu
  • No.1218
  • edit ]

きっと 初歩的な質問ですが

いつもお世話になっています。待ち遠しい≪早く冬休みが終わって欲しいカレンダー≫にしました。字の大きさを変えるのは どうしたらヨイのでしょうか?よろしくご指導をお願いします。

  • 海岸通り
  • 2005.12.29
  • Thu
  • No.1224

海岸通りさんへ

はいはい。こちらをお使いください。

<div style="font-size:10px;">
ここにScriptをコピー
</div>

もしもこれで文字が大きすぎたり小さすぎたりするようなら、10の部分を14とか8とか変更して調整してください。

日替わりサプライズ。ネーミングもよいですねー。(スズメバチ痛そうでした^^)無事設置おめでとございました♪

  • satokoto
  • 2005.12.29
  • Thu
  • No.1226
  • edit ]

は・は・は・・・

なるほど!HTMLの本の最初にありますよね・・・ゴメンナサイ(年末でただでさえ 忙しいのに!)自分の未熟さが身にしみます・・・感謝です。

  • 海岸通り
  • 2005.12.29
  • Thu
  • No.1228

海岸通りさんへ

お花も試してしまいました^^
いえいえ、どうぞ今後ともお気軽に。よいお年をお迎えくださいませ。

  • satokoto
  • 2005.12.30
  • Fri
  • No.1230
  • edit ]

使わせていただきました

こういう便利なものがあるというのを知り、僕が管理しているブログにも使わせていただきました。どうもありがとうございました!

  • たっつぁん
  • 2005.12.31
  • Sat
  • No.1239

たっつぁんさんへ

こちらこそ紹介までいただいてありがとうございました。

  • satokoto
  • 2006.01.04
  • Wed
  • No.1249
  • edit ]

no title

はじめましてー!!
ブログパーツ使わせてもらってます!
すごくつけたかったので、このブログを見つけれてうれしかったです。
ブログ友達がつけ方を教えて欲しいそうなので
ブログ内で紹介させていただきました。
事後報告で申し訳ありませんがよろしくお願いします!

  • あい
  • 2006.02.17
  • Fri
  • No.1555
  • edit ]

satokoto

紹介までいただいてありがとうございました!

  • あいさんへ
  • 2006.02.18
  • Sat
  • No.1557
  • edit ]

またまた

利用させていただきました。
というか、今までも、ちょこちょこ色んなパーツを使わせていただいてます。
今回はおめでたいことだったので、久々にお知らせをしようかと(笑)
本当にこちらにはお世話になりっぱなしです。
ありがとうございます。

  • mgmeg
  • 2006.02.28
  • Tue
  • No.1658
  • edit ]

satokoto

ありがとうございます。いやはやなんともおめでたい!
そしてmgmegさんところも遅くなりましたがおめでとうございます!!閏年だとどうなるんだろう・・パソコンの日付依存なので、多分閏年も大丈夫だとは思うのですが、自信なしですみません

  • mgmegさんへ
  • 2006.03.03
  • Fri
  • No.1664
  • edit ]

夜オムツ卒業カウントダウン

長男が夜オムツを卒業しそうなので、カウントダウンに使わせていただきました。
30日連続、OKなら、卒業!です。

  • chikilibaby
  • 2006.03.28
  • Tue
  • No.1811

satokoto

おぉ!そういう法則があるんですねー。あと19日!がんばれご長男^^

  • chikilibabyさんへ
  • 2006.03.29
  • Wed
  • No.1813
  • edit ]

satokoto

そういう使い方もあるんですね。嬉しいコメントありがとうございました!

  • 秘密さんへ
  • 2006.04.23
  • Sun
  • No.1970
  • edit ]

使わせていただきました

備忘メモとして使わせていただきます。
とても可愛いです。

他にもたくさん便利なものが紹介されているので時間を見て勉強したいと思います。

  • M
  • 2006.06.20
  • Tue
  • No.2190
  • edit ]

satokoto

忘れちゃまずい日はカウントダウンさせると便利ですよね。JavaScriptってほんとえらいなー。ありがとうございました!

  • Mさんへ
  • 2006.06.21
  • Wed
  • No.2197
  • edit ]

★お借りしました★

ブログに、早速設置させていただきました。
ありがとうございました★

  • 煌 友愛
  • 2006.07.10
  • Mon
  • No.2272
  • edit ]

satokoto

初逢瀬からカウントダウン。それってちょっといいですね。こちらこそありがとうございました!

  • 煌 友愛さんへ
  • 2006.07.12
  • Wed
  • No.2278
  • edit ]

ども。

カウントダウン・・・
借りていきまぁ~す゚+。:.゚ヽ(*´∀`)ノ゚.:。+゚

  • こころ♡
  • 2006.09.01
  • Fri
  • No.2434

satokoto

お誕生日まであと17日!先にお祝いしておこ。おめでとうございます^^

  • こころ♡さんへ
  • 2006.09.02
  • Sat
  • No.2438
  • edit ]

使わせていただきました**

学校で合唱コンクールがあります。
それも今年で最後です。。涙
カウントダウン、使わせていただきます(ノH`●)

本当に、ありがとうございました!

  • かなぼぅ
  • 2006.10.23
  • Mon
  • No.2594
  • edit ]

satokoto

ばっちり設置おめでとうございました。ステキに使ってくださって嬉しいです。
合唱コンクールまであと5日なんですね。のどに気をつけて、思う存分歌ってくださいねー!

  • かなぼぅさんへ
  • 2006.10.23
  • Mon
  • No.2595
  • edit ]

使わせていただきました!

わかりやすい説明で、簡単に設置できました*^^*
また、遊びに来ます^^

  • 花嫁見習い
  • 2006.11.09
  • Thu
  • No.2681

satokoto

ばっちりですね!設置おめでとうございました。
日本での結婚式は、準備期間は実際いろいろ大変だったりするんだろうけれど、悩んだりすること自体も楽しめそうで少しうらやましいです。

  • 花嫁見習いさんへ
  • 2006.11.09
  • Thu
  • No.2688
  • edit ]

使わせていただきます(^^)

こんにちは。
昨夜こちらからコピペでクリスマス用に
使わせていただきました。
とてもかわいく、さりげない感じで
気に入っています。
クリスマス後はお正月にも使わせていただく
予定です。
コピペでできたので初心者の私にも
簡単に設置できました♪
ありがとうございました <m(__)m>

  • 流音
  • 2006.11.27
  • Mon
  • No.2783
  • edit ]

satokoto

いよいよカウントダウンの季節がやってきましたね。ネコクリスマスがかわいい!
無事設置おめでとうございました&こちらこそありがとうございました。

  • 流音さんへ
  • 2006.11.27
  • Mon
  • No.2787
  • edit ]

お世話になります<m(__)m>

お正月ver.使わせていただきます(^^)
いつもありがとうございます。
クリスマスverから変えようと思いましたが
どうしていいかわからず、こちらにきてみたら
ちゃんとお正月用が準備されていて助かりました!
早速お借りします。
コピペだと助かります(^-^)

  • 流音
  • 2006.12.26
  • Tue
  • No.2943
  • edit ]

satokoto

嬉しいコメントありがとうございます。変えておいてよかった^^

  • 流音さんへ
  • 2006.12.27
  • Wed
  • No.2947
  • edit ]

はじめまして

使わせていただきますね

  • まちゃぴぃ
  • 2007.08.21
  • Tue
  • No.3471

satokoto

ありがとうございます。(使いづらくてほんとごめんなさい)

  • まちゃぴぃさんへ
  • 2007.08.22
  • Wed
  • No.3474
  • edit ]

はじめまして

こんなのを探してました!!
シンプルで邪魔になんないけど、ちゃんとカウントダウンしてくれる・・・最高です。
使わせていただきます!!

  • tormenta
  • 2008.01.27
  • Sun
  • No.3875

satokoto

いえいえ、こちらこそありがとうございました!

  • tormentaさんへ
  • 2008.01.28
  • Mon
  • No.3876
  • edit ]

おしえてください!

アメリカに経つ日までと アメリカで暮らし始めてからの日にちをカウントしたくて 昨日から 一生懸命やっているのですが どうしてもできません。
お忙しいところ申し訳ありませんが 教えてください。

プラグインのフリーエリア・”フリーエリア内容の変更” という欄にコピペしているのですが、プレビューでみると、タイトルだけ表示され あとは どうゆうわけか、『 1GB! FC2ブログ(blog) 』 という1行が出来てます(-_-;)
どうしてでしょうか???

とってもシンプルで使いやすそうなカウントダウンなので ぜひ使わせていただきたく、お教えくださいますよう お願い致します。

  • エイミー
  • 2008.02.14
  • Thu
  • No.3917
  • edit ]

satokoto

全部のスクリプトが貼り付けられてないことが原因のようです。
とりあえず、今のままで表示させたい場合は、貼り付けたスクリプトの一番下に以下を追加してみてください。
// --></script>

これで一応表示はされるはずですが、いま貼り付けてあるスクリプトは途中で途切れちゃってるのでうまく機能しない可能性があります。

できればもう一度、グレー部分のスクリプトを上から下までもれなくコピーして、何も変更せずに貼り付けて、まずは正常に表示されるか確認。
それから文章や日付の調整をしてゆくとどこで表示されなくなったか後戻りしやすいような感じがします。(人それぞれですけどね^^)

まだおかしかったらお手数ですがもう一度コメント付けておいて下さいませー。(はなちゃん、かわいい!!)

  • エイミーさんへ
  • 2008.02.14
  • Thu
  • No.3918
  • edit ]

もうひとつ 教えてください!

お返事 どうもありがとうございました!!
教えていただいたとおり 全部をコピペしてみたら ちゃんと出たので 青字の部分を変えてみました。
これも ちゃんとできて 感動です♪(笑)

ですが・・・
できれば 「はなちゃんがお空を飛ぶまで」 で1行として 行を変えて 「あと○○日です」 としたいのですが、どのようにしたら 行をかえることができますか?
<br>を使うことはわかっているのですが どこに入れればいいのかがわかりません・・・。
たびたび申し訳ありませんが、教えていただけたら嬉しいです・・・<(_ _)>

  • エイミー
  • 2008.02.14
  • Thu
  • No.3919
  • edit ]

satokoto

おぉ!めでたく表示されましたね。

改行ですね。
「はなちゃんがお空を飛ぶまで、あと」の部分を
「はなちゃんがお空を飛ぶまで<br>あと」に変更するだけで改行されます。
<br>は入力したところの前後が改行されるので、他の文章もこの要領でやってみてください。

例)
今日はいよいよ大晦日ですね
    ↓
今日はいよいよ
大晦日ですね

この場合は
「今日はいよいよ大晦日ですね」の部分を
「今日はいよいよ<br>大晦日ですね」でOKです。
うまくゆきますように!

  • エイミーさんへ
  • 2008.02.14
  • Thu
  • No.3920
  • edit ]

ありがとうございました♪

出来ましたっ♪
丁寧に教えてくださって 本当にどうもありがとうございました♪
とってもうれしいです!!

  • エイミー
  • 2008.02.14
  • Thu
  • No.3921
  • edit ]

satokoto

完成ですねー!わたしも嬉しいです。
こちらこそありがとうございました^^

  • エイミーさんへ
  • 2008.02.14
  • Thu
  • No.3922
  • edit ]

コメントを投稿する ▼

パスワードを入力しておくと、後で投稿の修正や削除ができます。
 非公開コメントとして投稿する。

トラックバック

FC2ブログユーザー限定トラックバック&記事作成便利リンク

お店のリニューアルオープンまでカウントダウン!

 2006年の4月14日にお店がオープンする予定ということをロベルトさんから聞い

We Support D.N.A ROCK CAFE ! 2005.12.31

結婚カウントダウン、ブログパーツのつけ方!

結婚カウントダウンどうやってつけたのーー??っていう質問がありましたのでお答えします!!

結婚するよ。 2006.02.17