動的なデジタル時計を実装するJavaScript
|
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 成果を達成する
コードの実装
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
* {
パディング: 0;
マージン: 0;
}
＃箱 {
幅: 1000ピクセル;
高さ: 300px;
背景画像:url(1.jpg);
行の高さ: 300px;
テキスト配置: 中央;
フォントサイズ: 50px;
フォントの太さ: 500;
マージン: 100px 自動;
}
</スタイル>
</head>
<本文>
<div id="box"></div>
<スクリプト>
box = document.getElementById('box') とします。
// 10 未満の数にゼロを追加します。let addZero = val => val < 10 ? '0' + val : val
// 週のアラビア数字を漢字に変換します // 週のマッピングテーブル let trans = val => {
obj = {
0: 「日」、
1: 「一」,
2: 「2」、
3：「3」
4: 「4」、
5: 「ファイブ」
6: 「シックス」
}
obj[val]を返す
}
時間を設定する()
//時間を取得するメソッド function setTime() {
time = new Date(); とします。
let year = time.getFullYear(); // 年を取得します。let month = time.getMonth() + 1; // 月を取得します（0 から 11 までなので、1 を加算する必要があります）
let date = time.getDate(); // 日付を取得しますlet day = time.getDay(); // 曜日を取得します (0 は日曜日)
let hour = time.getHours(); // 時間を取得let min = time.getMinutes(); // 分を取得let sec = time.getSeconds(); // 秒を取得let value = year + 'year' + addZero(month) + 'month' + addZero(date) + 'day of week' + trans(day) + ' '+addZero(hour) +
'時間' + addZero(分) + '分' + addZero(秒) + '秒'
// すべての時間をまとめる box.innerText = value
// console.log(値)
//スプライスされた時間をページに挿入します}
// タイマーが 1 秒ごとに setTime メソッドを実行するようにします (これがクロックの実装の核心です)
間隔を設定します(時間の設定、1000)
</スクリプト>
</本文>
</html>材料
以上がこの記事の全文です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。
>>: MySQL 5.7.23 バージョンのインストールチュートリアルと設定方法
推薦する
MySQL のフィールドにデフォルトの時間を追加する方法
日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...
MySQL の pid とソケットの詳細な説明
目次1. pidファイルの紹介2.ソケットファイルの紹介要約:ソケット ファイル: Unix ドメイ...
editplus の Zen コーディング例コードの説明
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順
Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https:...
MySQL の列から行への変換と年月グループ化の例
以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...
vue3 のさまざまな構文形式を比較したサンプルコード
デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...
docker inspect コマンドの使用に関するヒント
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
MySQL ストアド プロシージャの in、out、inout パラメータの例と概要
ストアドプロシージャ1. ストアドプロシージャを作成し、グローバル変数を表示する mysql>...
JavaScript でロジック判定コードを最適化する方法
序文日常生活で使用する論理的判断文には、if...else...、switch...case...、...
Web コンテンツ ページを作成するための 9 つの実用的なヒント
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
Vueリクエストインターセプターの設定方法の詳しい説明
以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...
入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)
Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...
Vueカスタムツリーコントロールの使い方の詳細な説明
この記事では、Vueカスタムツリーコントロールの使い方を参考までに紹介します。具体的な内容は次のとお...
Linux sftp コマンドの使用法の概要
sftp は、安全なファイル転送プロトコルである Secure File Transfer Prot...
Vueライフサイクルの詳細な説明
目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...