ベストセラー人気 WordPress テーマTop 30 詳細

javascriptを使った簡単な日付のカウントダウン

Last Updated：2021年10月23日| | 13のコメント

JavaScriptを使用した日付のカウントダウンスクリプトです（例えば、2017年新年までの残り日数など）。 簡単に活用することができるようになります。

javascriptを使った簡単な日付のカウントダウン例示

CountDownTimer('01/01/2017', 'countdown'); // 2017년 1월 1일까지
CountDownTimer('01/01/2018 00:00 AM', 'newcountdown'); // 2018년 1월 1일까지, 시간을 표시하려면 01:00 AM과 같은 형식을 사용합니다.

function CountDownTimer(dt, id)
{
var end = new Date(dt);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {

clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';

return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);

document.getElementById(id).innerHTML = days + '일 ';
document.getElementById(id).innerHTML += hours + '시간 ';
document.getElementById(id).innerHTML += minutes + '분 ';
document.getElementById(id).innerHTML += seconds + '초';
}

timer = setInterval(showRemaining, 1000);
}
// Source: stackoverflow

カウントダウンを表示するには、次のようなHTMLコードを使用します。

<div id="countdown"></div>
<div id="newcountdown"></div>

下jsfiddleで実際の動作を確認することができます。 CSSを使用してスタイルを調整してくれれば、それなりにシンプルで大丈夫そうです。

または "EASY COUNTDOWN TO DATE WITH JAVASCRIPT＆JQUERY（JavaScriptとjQueryを使用した簡単な日付のカウントダウン）」に記載されているスクリプトを使用してみることができます。

また、この記事で紹介されたjQueryスクリプトを使用すると、レイアウトがまともな日のカウントダウンをサイトに追加することができます。 （文が作成されたか長くなって接続しないリンクもあります。）下の図のように "ソース」をクリックすると、ソースをダウンロードすることができます（リンクが壊れてもあります）。

Countdownカウントダウン例示

これらのスクリプトを使用すると、サービスをリリースする日までの日数の数やサイトオープンまでの残り日数などを表示することも可能です。 このような機能をする PHPスクリプトを利用すれば、よりきれいに表示することが可能です。

PHPスクリプト/ JavaScriptのテンプレート：

機能を直接実装することの難しさを経験したり、時間がかかる場合、さまざまなPHPスクリプトは、JavaScriptのテンプレート、JQueryのテンプレート、CSSコード、 WordPress プラグインなどを販売している CodeCanyonで、比較的低価格でPHPスクリプトやJavascript / jQueryテンプレートを購入することができます。

コードキャニオンで販売されているjavascript / jQueryテンプレート
CodeCanyonで販売されているjavascript / jQueryテンプレート

参照

13のコメント

コメント

?

  1. 私は時間のみを表示をするようにしたが、例えば「5500時間残って」ではなく「5,500時間残って」と3桁のに点を打ち、たい、どうすればいいですか〓〓（時間のみを表示する方法もコメント二度とことを見ました！ありがとうございます！）

    応答

    • こんにちは。

      Googleで1000単位でカンマを付ける適切なJavaScriptを探してアプリケーションとなります。

      例として、以下のjsfiddleを参照してください。

      http://jsfiddle.net/1fe6gjn5/

      ( http://jsfiddle.net/mn25aLo9/1/ 例示の千単位でコンマを付けるスクリプトを追加しました。）

      千単位のコンマを入れるスクリプトは https://www.w3resource.com/javascript-exercises/javascript-math-exercise-39.php 文書を参照していました。

      応答

  2. 例確認してみる
    CountDownTimer（「2020-05-15」、「countdown '）; //開始点
    CountDownTimer（「2020-05-15」、「newcountdown '）; //終わるところ
    このようにしたらうまく動作するんですが

    CountDownTimer（「2020-05-15 13:44:55」、「countdown '）; //開始点
    CountDownTimer（「2020-05-15 21:10:00」、「newcountdown '）; //終わるところ
    このように後ろに時間を表示すると、エラーが浮遊ね

    確認してみるCountDownTimer（「2020-05-08T12：00：00Z」、「countdown '）; //開始点
    このようにしたら、通常の動作をするんですが

    私がしたいのDBの値を呼び出してしたいと思い

    DBの値は2020-04-08 23:30:00イヒョンシクに保存されているんですよ

    この方式的にはエラーが見つけるか？ それとも、DBの値呼ん見呼び出しが可能でしょうか？

    応答

    • DBからのデータの形式を、エラーが出ていない形式で変えるか、データを読み込んだ後にデータを空白に基づいてXNUMXつの部分に分けて操作した後にCountDownTimer関数の中に入れると、ないでしょうか

      応答

  3. こんにちは
    CountDownTimer（'05 / 13/2020 '、' countdown '）; //開始点
    CountDownTimer（'05 / 17/2020 00:00 AM '、' newcountdown '）; //終わるところ
    この部分を
    CountDownTimer（「2020-05-15」、「countdown '）; //開始点
    CountDownTimer（「2020-05-15 00:00 AM '、' newcountdown '）; //終わるところ
    このようにしようとし

    してみるとエラーが出るのに、他の方法があるでしょう？

    応答

    • こんにちは、ジョンソンユン様。

      次のw3schoolsのドキュメントを参照してみてください？

      https://www.w3schools.com/howto/howto_js_countdown.asp

      例では、日付のフォーマットを2020-05-15ように変えても正常に動作しています。
      JavaScriptの日付形式には、次のw3schools文書を参照してみてください。

      https://www.w3schools.com/js/js_date_formats.asp

      応答

    • こんにちは？

      難しく考えないで「仕事」を時間に換算して、時間とよりくれればならないでしょう？

      http://jsfiddle.net/mn25aLo9/1/

      もし「分」と「秒」が必要ない場合は、その部分は削除することになります。

      応答

      • または、新しい時間を次のように計算して表示しても同じ結果を得ることができるようになります。

        Math.floor（distance / _hour）;

        例： http://jsfiddle.net/tm9yLho8/

    • こんにちは？

      ブログを訪問していただきありがとうございます。

      time zoneには、次の文を参照してください。

      https://www.w3schools.com/jsref/jsref_gettimezoneoffset.asp

      https://stackoverflow.com/questions/10087819/convert-date-to-another-timezone-in-javascript?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

      https://www.youtube.com/watch?v=UT2dP447roo

      してみて、うまくいかない場合は、サイトでお問い合わせいただくと正確な回答を受けることができるようです。

      楽しい一日を過ごす。

      応答
WordPress Naver カフェを訪れる

ありがとうございます！