動的なデジタル時計を実装する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 8.0 のユーザーとロールの管理原則と使用方法の詳細
この記事では、MySQL 8.0 のユーザーとロールの管理について例を挙げて説明します。ご参考までに...
CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装
まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます...
CSS の position 属性の値に関する研究 (概要)
CSS の位置属性は要素の配置タイプを指定し、上、下、左、右を使用して要素を具体的に配置します...
Vueはユーザー名が使用可能かどうかの検証を実装します
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...
フロントエンド JavaScript でローカルあいまい検索機能を実装する方法の例
目次1. プロジェクトの見通し2. 知識ポイントObject.assign() の使用法filter...
Ansibleを使用してTomcatをバッチでデプロイする方法
1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...
CSS の優先順位に関する詳細な紹介
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
Vueは視覚的なドラッグページエディタを実装します
目次ドラッグアンドドロップの実装ドラッグイベントドラッグして開始リリースゾーンでの移動境界処理、角度...
Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。
Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...
Linux での MySQL 5.1 および 5.7 のインストール チュートリアル
以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...
Node.JS で悪天候のリアルタイム警報システムを構築する
目次序文：ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
Vue で v-for を更新する方法
ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...
MySQL 外部キー設定方法の例
1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...
VSCode 開発 UNI-APP 構成チュートリアルとプラグイン
目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....
CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法
1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...