楽天でショッピング中に見かけた、下の動画「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;」となどとすれば、表示は下のほうにすることもできます。
