JavaScriptはシンプルな日付効果を実装します
|
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。 コード上で直接:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル タイプ="text/css">
*{
パディング: 0;
マージン: 0;
}
＃日付{
幅: 450ピクセル;
高さ: 300px;
背景色: ダークオレンジ;
境界線の半径: 10px;
マージン: 100px 自動;
}
#現在日付{
幅: 450ピクセル;
高さ: 60px;
行の高さ: 60px;
テキスト配置: 中央;
色: #fff;
フォントサイズ: 26px;
}
＃日{
幅: 200ピクセル;
高さ: 200px;
行の高さ: 200px;
背景色: 蘭色;
マージン: 0 自動;
テキスト配置: 中央;
}
</スタイル>
</head>
<本文>
<div id="日付">
<p id="nowDate"></p>
<p id="日"></p>
</div>
<script type="text/javascript">
// タグを取得します var nowDate = document.getElementById("nowDate");
var day = document.getElementById("day");
// タイマーを使用して時間の変更を更新します setInterval(nowNumTime,1000);
現在の時間数();
関数 nowNumTime(){
var now = 新しい Date();
var hour = now.getHours();
var 分 = now.getMinutes();
var second = now.getSeconds();
var temp = '' + (hour>12 ? hour-12:hour);
var year = now.getFullYear();
var 月 = now.getMonth();
var d = now.getDate();
var week = now.getDay();
console.log(week); //インデックス var weeks = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
// コンソールログ(temp);
(時間 === 0)の場合{
温度 = '12';
}
temp = temp + (分 <10 ? ':0':":"+分);
temp = temp + (秒 <10 ? ':0':":"+秒);
temp = temp + (hour>=12 ? 'PM':'AM');
temp = `${year}${month}${d}${temp}${weeks[week]}`;
// コンソールログ(temp);
nowDate.innerHTML = temp;
}
</スクリプト>
</本文>
</html>実装効果図:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CentOS 6 または CentOS 7 でディスク領域をクリアする方法
推薦する
Linuxサーバーのファイアウォールを変更してポートへのリモートアクセスを許可する方法
1. 問題の説明セキュリティ上の理由から、新しく構築されたサーバー クラスターでは、指定されたポート...
JavaScript のアンチシェイクとスロットリングの違いと実装
目次1. 手ぶれ補正2. スロットリング3. まとめ序文：フロントエンド開発者には、次の 2 つの要...
Docker は 2003 年の問題を解決するために MySQL リモート接続を導入しました
MySQLへの接続ここでは、リモート接続に navicat を使用します。MySQL に接続する前に...
JavaScript オブジェクトを作成する 3 つの方法
目次1. オブジェクトリテラル2. newキーワードはオブジェクトを作成する3. Object.cr...
nginxディレクトリパスをリダイレクトする方法
ドメイン名に続くパスがデフォルトの Web ディレクトリではなく、ローカル ディスク上の他のディレク...
jQueryは画像の強調表示を実現します
ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...
Ubuntu で XFS ファイルシステム用の LVM を作成する方法
序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...
JDBC 探索 SQLException 分析
1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...
Vueストレージにはブール値のソリューションが含まれています
Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...
フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介
1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...
CocosCreatorオブジェクトプールの使い方
目次序文：特定の操作ステップ1: プレハブを準備するステップ2: オブジェクトプールを初期化するステ...
JavaScript で 2 次元配列を作成するためのヒント
Js での 2 次元配列の作成:まず、JavaScript は 1 次元配列のみをサポートしています...
js を使用してウォーターフォール効果を実現する
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...
繰り返し送信、繰り返し更新、バックオフ防止に関する問題と解決策の分析
1つ。序文<br />この種の質問は、どの専門掲示板でも見かけます。Google で検索...
MySQL がデフォルト値を持つ NULL 列の使用を推奨しない理由
よく聞かれる答えは、列に NULL 値を使用するとインデックスが無効になるというものですが、実際にテ...