HTML、CSS、JavaScriptを使用してデジタル時計を作成する方法

デジタル時計は、JavaScriptの最高の初心者プロジェクトの1つです。どんなスキルレベルの人でも学ぶのはとても簡単です。

この記事では、HTML、CSS、およびJavaScriptを使用して独自のデジタル時計を作成する方法を学習します。変数の作成、関数の使用、日付の操作、DOMへのプロパティへのアクセスと追加など、さまざまなJavaScriptの概念を実際に体験できます。

グーグルプレイサービスを修正する方法

始めましょう。

デジタル時計のコンポーネント

デジタル時計には、時、分、秒、子午線の4つの部分があります。

デジタル時計プロジェクトのフォルダ構造

HTML、CSS、およびJavaScriptファイルを含むルートフォルダーを作成します。ファイルには任意の名前を付けることができます。ここで、ルートフォルダの名前は デジタル時計 。標準の命名規則に従って、HTML、CSS、およびJavaScriptファイルに名前が付けられます index.html 、 styles.css 、と script.js それぞれ。

HTMLを使用してデジタル時計に構造を追加する

を開きます index.html 次のコードをファイルして貼り付けます。

  
  
  
  
 Digital Clock Using JavaScript

ここで div で作成されます id の デジタル時計 。このdivは、JavaScriptを使用してデジタル時計を表示するために使用されます。 styles.css は外部CSSページであり、を使用してHTMLページにリンクされています。鬼ごっこ。同様に、 script.js は外部JSページであり、を使用してHTMLページにリンクされています。 < スクリプト> 鬼ごっこ。

JavaScriptを使用してデジタル時計に機能を追加する

を開きます script.js 次のコードをファイルして貼り付けます。

function Time() {  
 // Creating object of the Date class  
 var date = new Date();  
 // Get current hour  
 var hour = date.getHours();  
 // Get current minute  
 var minute = date.getMinutes();  
 // Get current second  
 var second = date.getSeconds();  
 // Variable to store AM / PM  
 var period = '';  
 // Assigning AM / PM according to the current hour  
 if (hour >= 12) {  
 period = 'PM';  
 } else {  
 period = 'AM';  
 }  
 // Converting the hour in 12-hour format  
 if (hour == 0) {  
 hour = 12;  
 } else {  
 if (hour > 12) {  
 hour = hour - 12;  
 }  
 }  
 // Updating hour, minute, and second  
 // if they are less than 10  
 hour = update(hour);  
 minute = update(minute);  
 second = update(second);  
 // Adding time elements to the div  
 document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;  
 // Set Timer to 1 sec (1000 ms)  
 setTimeout(Time, 1000);  
}  
 // Function to update time elements if they are less than 10  
 // Append 0 before time elements if they are less than 10  
function update(t) {  
 if (t <10) {  
 return '0' + t;  
 }  
 else {  
 return t;  
 }  
}  
Time();

JavaScriptコードを理解する

NS 時間（） と アップデート（） 関数は、デジタル時計に機能を追加するために使用されます。

現在の時間要素を取得する

現在の日付と時刻を取得するには、Dateオブジェクトを作成する必要があります。これは、JavaScriptでDateオブジェクトを作成するための構文です。

var date = new Date();

現在の日付と時刻はに保存されます 日にち 変数。次に、日付オブジェクトから現在の時、分、秒を抽出する必要があります。

date.getHours（） 、 date.getMinutes（）、 と date.getSeconds（） 日付オブジェクトからそれぞれ現在の時、分、秒を取得するために使用されます。すべての時間要素は、以降の操作のために個別の変数に格納されます。

var hour = date.getHours();  
var minute = date.getMinutes();  
var second = date.getSeconds();

現在の正午の割り当て（AM / PM）

デジタル時計は12時間形式であるため、現在の時間に応じて適切な子午線を割り当てる必要があります。現在の時間が12以上の場合、メリディエムはPM（ポストメリディエム）です。それ以外の場合は、AM（アンティメリディエム）です。

var period = '';  
if (hour >= 12) {  
 period = 'PM';  
} else {  
 period = 'AM';  
}

現在の時間を12時間形式に変換する

次に、現在の時間を12時間形式に変換する必要があります。現在の時間が0の場合、現在の時間は12に更新されます（12時間形式に従って）。また、現在の時間が12より大きい場合は、12時間の時間形式に合わせるために、12ずつ短縮されます。

if (hour == 0) {  
 hour = 12;  
} else {  
 if (hour > 12) {  
 hour = hour - 12;  
 }  
}

時間要素の更新

時間要素が10（1桁）未満の場合は、更新する必要があります。すべての1桁の時間要素（時、分、秒）に0が追加されます。

hour = update(hour);  
minute = update(minute);  
second = update(second);  
function update(t) {  
 if (t <10) {  
 return '0' + t;  
 }  
 else {  
 return t;  
 }  
}

時間要素をDOMに追加する

まず、ターゲットdivのIDを使用してDOMにアクセスします（ デジタル時計 ）。次に、時間要素がdivを使用してdivに割り当てられます。 innerText セッター。

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

毎秒時計を更新する

時計は、を使用して毎秒更新されます setTimeout（） JavaScriptのメソッド。

setTimeout(Time, 1000);

CSSを使用したデジタル時計のスタイリング

を開きます styles.css 次のコードをファイルして貼り付けます。

関連している： CSSボックスシャドウの使用方法：秘訣と例

/* Importing Open Sans Condensed Google font */  
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');  
  
#digital-clock {  
 background-color: #66ffff;  
 width: 35%;  
 margin: auto;  
 padding-top: 50px;  
 padding-bottom: 50px;  
 font-family: 'Open Sans Condensed', sans-serif;  
 font-size: 64px;  
 text-align: center;  
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}

上記のCSSは、デジタル時計のスタイル設定に使用されます。ここでは、Open SansCondensedフォントを使用して時計のテキストを表示しています。を使用してGoogleフォントからインポートされます @輸入 。 NS ＃デジタル時計 idセレクターは、ターゲットdivを選択するために使用されます。 IDセレクターは id 特定の要素を選択するためのHTML要素の属性。

関連している： 10分で学ぶことができる簡単なCSSコード例

この記事で使用されている完全なソースコードを確認したい場合は、こちらをご覧ください。 GitHubリポジトリ。また、このプロジェクトのライブバージョンをご覧になりたい場合は、こちらからチェックしてください。 GitHubページ。

ノート ：この記事で使用されているコードは MITライセンス。

他のJavaScriptプロジェクトを開発する

JavaScriptの初心者で、優れたWeb開発者になりたい場合は、JavaScriptベースの優れたプロジェクトを構築する必要があります。彼らはあなたの履歴書とあなたのキャリアに価値を加えることができます。

電卓、ハングマンゲーム、Tic Tac Toe、JavaScript天気アプリ、インタラクティブなランディングページ、体重変換ツール、ロックペーパーシザーズなどのプロジェクトを試すことができます。

映画を見るのに最適な無料サイト

次のJavaScriptベースのプロジェクトを探している場合は、単純な計算機が最適です。

共有共有つぶやき Eメール HTML、CSS、JavaScriptを使用して簡単な電卓を作成する方法

単純な計算されたコードは、プログラミングの際の方法です。 HTML、CSS、およびJSで独自の計算機を作成する方法を確認してください。

次を読む 関連トピック

WordpressとWeb開発
プログラミング
HTML
ウェブ開発
JavaScript
CSS

著者について ユブラジチャンドラ（60件の記事が公開されました）

Yuvrajは、インドのデリー大学のコンピュータサイエンス学部生です。彼はフルスタックWeb開発に情熱を注いでいます。執筆していないときは、さまざまなテクノロジーの深さを探っています。

YuvrajChandraのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください