Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptカウントダウンタイマー：チュートリアル

カウントダウンタイマーは、主要なイベントにカウントダウンしたい人々によってインターネット全体で使用されます。

カウントダウンタイマーを使用して、新しいWebサイトの立ち上げまでカウントダウンできます。カウントダウンタイマーは、製品の発表を行うときにマークを付けることができます。あなたが探求するための非常に多くの可能性があります。

このガイドでは、HTML、CSS、JavaScriptの3つのテクノロジーを使用してJavaScriptでカウントダウンタイマーを作成する方法を説明します。始めましょう！

ウェブページの設定

最初のステップは、基本的なWebページを設定することです。このガイドでは、外部ライブラリの使用について心配する必要はありません。シンプルに保ち、昔ながらのHTML、CSS、JavaScriptを使用します。

HTMLファイルを作成することから始めましょう： 

<!DOCTYPE html>
<html>
	<script>
		// We'll store our JavaScript code here
	</script>
	<style>
		// We'll write our CSS styles here
	</style>
	<body>
		<h1>It's almost time…</h1>
		<div id="timer"></div>
	</body>
</html>

現在、コードは特別なものを返しません。以下を参照してください。

JavaScriptカウントダウンタイマー：チュートリアル

コードにスタイルをまだ追加していないか、JavaScriptタイマーを作成していないため、このように表示されます。タイマーを強化するJavaScriptの作成に移りましょう。

タイマーの作成

JavaScriptには、日付と時刻を操作するために使用できるDateという便利なオブジェクトがあります。このオブジェクトは、カウントダウンする時刻のタイムスタンプを取得する目的と、現在の日付を取得する目的の2つの目的で使用します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

このチュートリアルでは、すべてのスクリプトをタグで記述します。外部スクリプトは使用しません。

現在の日付からカウントダウンしている日付を引くと、次の2つの日付の差がわかります。 

var timeLeft = +new Date("2021-05-04") - +new Date();

このコードは、次のスターウォーズの日である2021年5月4日までの残り日数を計算します。

この2日間の違いはわかっていますが、いくつか問題があります。まず、カウントダウンするタイマーがまだありません。第二に、私たちの日付は、人間が読みやすい形式で保存されていません。ミリ秒単位で保存されますが、これは私たちにとって必ずしも便利ではありません。時間を日、時間、分に変換する必要があります。

より読みやすい形式で残り時間を計算するために、次のコードを使用します。

var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

次のコードを使用して、値を文字列にフォーマットできます。 

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;

このコードでは、文字列補間を使用して、前に計算した値に置き換えます。これにより、次のようなタイムスタンプが得られます：314日13時間52分。

タイムスタンプを生成したので、それをWebページに配置できます：

document.getElementById("timer").innerHTML = timeLeftText;

すべてのコードを関数に移動できます：

function countdown() {
	var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);

const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
document.getElementById("timer").innerHTML = timeLeftText;
}

countdown();

ページをロードすると、以下が返されます。

JavaScriptカウントダウンタイマー：チュートリアル

これでタイマーができました。その日は終わりですよね？いいえ;そんなに早くない。 1分待つと、タイマーが実際にカウントダウンしないことがわかります。これは、ブラウザに毎分更新するように指示する必要があるためです。このコードを使用してこれを行います：

setInterval(countdown, 60000);

このコードは、countdown（）関数が宣言された後に追加する必要があります。これにより、60,000ミリ秒ごとにページが更新されます。これは60秒ごとに相当します。

これで、コードを更新すると、毎分変更されることがわかります！

いくつかのスタイルの追加

私たちのカウントダウンタイマーは機能しているかもしれませんが、それは必ずしも美的に満足できるものではありません。ページをより魅力的にするために、いくつかのスタイルを作成しましょう。 

<style>
body {
	padding-top: 20%;
	height: 100vh;
background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
	text-align: center;
	color: white;
}
</style>

Webページは次のようになります。

JavaScriptカウントダウンタイマー：チュートリアル

ご覧のとおり、ページの背景はグラデーションになり、テキストは中央に揃えられ、テキストは白で表示されます。見栄えがいいです！

結論

カウントダウンタイマーは多くのサイトの重要な機能です。個人のウェブページとプロのウェブページの両方にカウントダウンが表示されます。人のブログには、結婚式のカウントダウンが掲載されている場合があります。会社のWebサイトには、製品発売までのカウントダウンが掲載されている場合があります。

これで、エキスパートのように独自のJavaScriptカウントダウンタイマーを作成する準備が整いました。


  1. JavaScript WeakSet

    JavaScript WeakSetは、オブジェクトのコレクションを格納するために使用されます。セットのように、重複は保存されません。 WeakSetのメソッド- メソッド 説明 add（obj） weakSetに新しい値を追加します。 delete（obj） weakSetから値を削除します。 has（obj） weakSetオブジェクトに値が含まれているかどうかに応じて、trueまたはfalseを返します。 length（） weakSetオブジェクトの長さを返します 以下はJavaScriptのWeakSetのコードです- 例

  2. JavaScriptでカウントダウンタイマーを作成するにはどうすればよいですか？

    JavaScriptでカウントダウンタイマーを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verd