時限(カウントダウン)タイマーを設置したい


この記事は約5分で読むことができます。

楽天でショッピング中に見かけた、下の動画「100分の1秒単位」でカウントダウン(キッチンタイマー?)するバナー。

この急かされ感はイイ感じなので、ぜひ、ショップサーブのお店に取り入れたいと思い調べてみた!

これ!↓

「これ系の動作は、基本、JavascriptかjQueryでしょう。」と思って、探ってみれたところ、簡単に見つかると思いきや、秒単位のカウントダウンはたくさんあるけど、100分の1秒まで対応したサンプルコードを見つけるのにちょっと苦戦しました。

でも、とりあえずJavascriptで使えそうなのを発見したのご紹介。

リアルタイムカウントダウンjavaScript

http://javascript123.seesaa.net/article/102586838.html

m(_ _ )m 拝借させて頂きます。ありがとうございます。

このサンプルは2015年1月までのカウントダウンなので既に終了。

year=2015; //年
mon=1; //月
day=1; //日
time=0; //時

日付をを変更すればバッチリですね。

とりあえず、サンプルをそのままお借りして、東京オリンピック開催の2020年7月24日までのカウントダウンを設定してみました。ベタな選択ですが!


timer.html

この表示は、HTMLファイルを別で作成して、インラインフレーム(iframe(小窓))で呼び出しています。ショップサーブの場合、ページ毎にHEAD内を編集できないので、インラインフレームが一番取り入れやすいと思われます。

楽天のお店は、950px✕285pxという大きなバナーに見えてますが、このバナー(に見える)ページを作成して、それをインラインフレームで商品ページに埋め込んでいる感じです。

カウンタータイマーは、そのHTMLにjavascriptで表示させていました。(タイマーのjavascriptは楽天ユーザーが使えるもの)

タイムセールで売り上げよう。

ちなみに、ヤフーストアで、こういったJavaScriptを使うには、トリプルというオプションを申しこまないといけないんですよね~。300Mで月3000円、10Gで月額5000円です。JS以外CSSなども使えるんですが、それだけのためにこの金額の意味がわからないですね。

そんな金額なら、カラー・ミーショップ・プロショップサーブで自社サイト立ち上げたほうがイイじゃね?

画像の上でカウントダウンだ!

こんな感じでタイムセールバナーを作れば言いわけですね。

ソースコードはこちら。

<div style="background: url(https://www.netshop7.com/blog2/wp-content/uploads/2019/12/olynpic.png); padding: 2em; text-align: center;"><figure><iframe style="border: none;" src="/sakusei/timer.html" width="530" height="240" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></figure>
</div>

拝啓にバナーなどの画像を指定して、その上にインラインフレームを乗っける感じですね。

上記サンプルは上部でカウントダウンですが、「padding-top:200px;」となどとすれば、表示は下のほうにすることもできます。