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

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桁ごとに点を撮りたいのですが、どうすればいいですかㅠㅠ

    応答

    1. こんにちは。

      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の値呼ん見呼び出しが可能でしょうか？

    応答

    1. 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'）; //終わるところ
    このようにしようとし

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

    応答

    1. こんにちは？

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

      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

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

      楽しい一日を過ごす。

      応答

コメントを残す

*電子メール情報は公開されません。