動的なデジタル時計を実装する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 バージョンのインストールチュートリアルと設定方法
推薦する
JavaScriptクロージャの原理と機能の詳細な説明
目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化（属性のプライベート化）閉...
IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法
ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...
resizeを使用して画像切り替えプレビュー機能を実装する方法
要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...
CentOS 8 仮想マシンから Windows 10 ホスト フォルダーにアクセスする方法の簡単な分析
VMware Toolsをインストールすると、仮想マシンホスト間で①テキストをコピーして貼り付けるこ...
Linux で Apache を使用してファイル サーバーを構築する手順
1. ファイルサーバーについてプロジェクトでは、公開ソフトウェアやデータをプロジェクト チーム メン...
Linux FTP匿名アップロードとダウンロードが自動的に開始される問題を解決する
勉強や仕事で FTP サーバーを頻繁に使用する場合は、起動時に自動的に起動するように設定できます。設...
vue $http の get および post リクエストのクロスドメイン問題を解決する
Vue $http get および post リクエストのクロスドメイン問題まずconfig/ind...
サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...
Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル
序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...
Vue3は独自のページングコンポーネントをカプセル化します
この記事の例では、vue3 が独自のページングコンポーネントをカプセル化する具体的なコードを参考まで...
Linuxのtopコマンド出力の詳細な説明
序文皆さんは Linux で top コマンドを使ったことがあると思います。私は Linux に触れ...
Dockerのオンラインおよびオフラインインストールと一般的なコマンド操作
1. テスト環境名前バージョンセント7.6ドッカー18.09.06 2. オンラインインストールここ...
モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
CentOS の MySQL に MariaDB をインストールするときに発生する方法と問題
以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...
MySQLのエンコードの不一致によって発生する可能性のある問題
ストアドプロシージャとコーディングMySQL ストアド プロシージャでは、テーブルとデータのエンコー...