動的なデジタル時計を実装する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 の単一テーブル クエリ操作例の詳細な説明 [構文、制約、グループ化、集計、フィルタリング、並べ替えなど]](/upload/images/67cad8b215baa.webp)
推薦する
シンプルな CSS テキストアニメーション効果
成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...
MySQL 外部キー制約 (FOREIGN KEY) ケースの説明
MySQL 外部キー制約 (FOREIGN KEY) はテーブルの特別なフィールドであり、主キー制約...
TypeScript ジェネリックパラメータのデフォルト型と新しい厳密なコンパイルオプション
目次概要コンポーネントクラスの型定義を作成するジェネリック型を使用してPropsとStateを定義す...
JavaScript デザインパターン コマンドパターン
コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...
mysql-8.0.16 winx64 最新インストール チュートリアル (画像とテキスト付き)
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
MySQL で固定されていない位置から文字列要素を抽出する方法
序文注: テストデータベースのバージョンはMySQL 8.0ですテストデータ: テーブルzqs(id...
MySQL の自動増分 ID (主キー) が不足した場合の解決策
MySQL で使用される自動インクリメント ID には多くの種類があり、各自動インクリメント ID ...
CSS3 のテキストとフォントの新しい設定
テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...
Mybatis での動的 SQL ステートメント分析
この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...
js におけるイベントバブリングとイベントキャプチャの簡単な分析
目次01-イベントバブリング1.1- イベントバブリングの概要1.2-イベントバブリングの利用（イベ...
MySQL フルテキスト インデックス、ジョイント インデックス、Like クエリ、JSON クエリのうち、どれが高速ですか?
目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...
CentOS 7 に Percona Server+MySQL をインストールする
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...
MySQL の sql_mode モード例の詳細な説明
この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...
Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析
質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...