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 でディスク領域をクリアする方法
推薦する
WeChat アプレットカスタムタブバーステップ記録
目次1. はじめに2. タブバーのスタイルをカスタマイズする3. カスタムタブバーと関連設定を導入す...
Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL 環境構築チュートリアル
準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...
React Fragment の紹介と詳しい使い方
目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...
個人的な意見: デザインについて語る
<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...
EChartsマルチチャート連携機能の実装プロセス
表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...
バッチモードでtopコマンドを実行する方法
top コマンドは、Linux システムのパフォーマンスを監視するために誰もが使用している最適なコマ...
Vue3 コンパイルプロセス - ソースコード分析
序文： Vue3 がリリースされてからかなり経ちますが、最近、会社のプロジェクトでVue3 + Ty...
CentOS8.1 で Gitlab サーバーを構築するための詳細なチュートリアル
Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...
Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)
1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...
VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス
仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...
Vue のすべてのカプセル化方法の簡単な概要
目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...
CocosCreator最適化DrawCallの詳細な説明
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
Firefox の CSS を使用してデータを盗む
0x00 はじめに数か月前、Firefox に脆弱性 (CVE-2019-17016) があること...
MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
TypeScript のユニオン型、交差型、型ガード
目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...