🏇🏼 🙃 🖐️ 純粋なJavaScriptの個別の時間カウンター 🤟🏻 🎤 ☄️

場合によっては、プラグインをインストールしたりライブラリ（jQueryなど）を接続したりせずに、単一ページのページまたはサイトで各訪問者に個別にカウントダウンを実装する必要があります。この問題を解決するために、純粋なJavaScriptでカウンターを開発しました。

このカウンターは次のように機能します。

ページがロードされるとアクティブになります。
訪問者のブラウザCookieでカウントダウンエントリを確認します。
レコードがある場合、それを読み取ります。レコードがない場合は、スクリプト設定で指定された時間がかかり、訪問者のブラウザのCookieにレコードが作成されます。
時間をフォーマットに変換して、より柔軟なカウンター設計を実現します。
スクリプトが呼び出された場所に、カウントダウンの完了に関するカウンターまたは碑文（時間がなくなった場合）が表示されます。

次に、カウンターコード自体を分析します。

始めるために、次のようなCookieの読み取りおよび書き込み関数を作成しました。

//  Cookie function getCookie(c_name) { var i, x, y, ARRcookies = document.cookie.split(";"); for (i = 0; i < ARRcookies.length; i++) { x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); x = x.replace(/^\s+|\s+$/g, ""); if (x == c_name) { return unescape(y); } } } //  Cookie function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; }

次に、上記で記録したCookie関数を使用し、「Big Day」という名前のCookieに以前に記録された値があるかどうかを確認しました。

 //     var str = getCookie('Big Day'); //  Cookie if(!str) //   Cookie     { var BigDay = new Date(); BigDay.setMinutes(BigDay.getMinutes()+1); //      setCookie('Big Day', BigDay, 3); //  Cookie }else{ BigDay = new Date(str); }

カウントダウンの完了時間がわかると、カウントダウンの終了までの残り時間が計算されます。ただし、カウンターのデザインをさらにカスタマイズできるようにするために、時間を数秒に短縮しています。

 //         var today = new Date(); var diff = BigDay - today; var countdown4 = Math.round(diff / 1000) //

秒単位の残り時間がある場合、必要なタイプに調整できます。記事が煩雑にならないように（行数が少し面倒なので）、スクリプトのこの部分はネタバレの下に隠れています：

スクリプトの隠された部分

 //       :  :  :  function convert_to_time(secs) { secs = parseInt(secs); hh = secs / 3600; hh = parseInt(hh); mmt = secs - (hh * 3600); mm = mmt / 60; mm = parseInt(mm); ss = mmt - (mm * 60); if (hh > 23) { dd = hh / 24; dd = parseInt(dd); hh = hh - (dd * 24); } else { dd = 0; } if (ss < 10) { ss = "0" + ss; } if (mm < 10) { mm = "0" + mm; } if (hh < 10) { hh = "0" + hh; } if (dd == 0) { return (hh + ":" + mm + ":" + ss); } else { if (dd > 1) { return (dd + " day " + hh + ":" + mm + ":" + ss); } else { return (dd + " day " + hh + ":" + mm + ":" + ss); } } }

次に、最後から2番目のブレークスルーを作成し、スクリプトのグラフィック部分に進みます。ここには、ページに表示するもののチェックがあります-残り時間のタイマー、またはタイマーが0:00:00にカウントしたメッセージ。

 //  -         do_cd4 = function() { if (countdown4 < 0) { document.getElementById('cd4').innerHTML = " !"; } else { document.getElementById('cd4').innerHTML = convert_to_time(countdown4); setTimeout('do_cd4()', 1000); } countdown4 = countdown4 - 1; }

そして最後に-カウンターにスタイルを割り当て、javascriptファイルの接続場所に出力します。この場所には、カウンターのコード全体が実際に配置されています。

 document.write("<div id='cd4' style='text-align: center; font-size: 40pt'></div>\n"); //     do_cd4(); //

それだけです、メーターは「仕事と防衛のために」準備ができています。

このリンク（github.com）からスクリプトをダウンロードできます。

純粋なJavaScriptの個別の時間カウンター

More articles: