動的なデジタル時計を実装する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の高性能最適化スキルの概要
データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...
deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順
ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...
ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法
目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...
理論の普及——ユーザーエクスペリエンス
1. 概念分析 1: UE ユーザー エクスペリエンス <br />英語ではユーザー エ...
Vue.jsは画像切り替え機能を実装する
この記事では、画像切り替え機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...
HTML スタイル タグと関連する CSS リファレンスの詳細な説明
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
MySql データベースのサブクエリと高度なアプリケーションの簡単な分析
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...
ウェブページで任意のフォントを使用する実践的な操作とデモ
以前、「Web ページにシステムに組み込まれていないフォントを埋め込む」という研究をしたことがありま...
docker ベースで Prometheus+Grafana を構築する手順の詳細説明
1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...
jsを使用して中国語からピンインへの変換の完全な手順を実行します
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
nginxサーバーのダウンロード、インストール、使用方法の詳細な説明
ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...
Unicode における CJK (中国語、日本語、韓国語の統合表意文字) 文字の概要
CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...
BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法
Baota PanelのPHP7.3バージョンがZipArchiveをサポートしていないため、プログ...
ボタントリガーイベントを使用して背景色の点滅効果を実現します
背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...
Nginxリバースプロキシ設定でプレフィックスが削除される
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...