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 でディスク領域をクリアする方法
推薦する
LayUI+Shiroは動的なメニューを実装し、メニュー拡張の例を記憶します
目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...
Vue がコンポーネント通信を実装する 8 つの例
目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...
nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
シーケンス関数を実装する MySQL コード
MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...
HTML知識ポイントの実践経験のまとめ
1. 表タグはtable、trは行、tdはセル、cellspacingはセル間の距離、cellpad...
MySql データ型チュートリアル例の詳細な説明
目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...
SELinux 入門
カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...
docker+devpi を使用してローカル pypi ソースをビルドする方法
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...
nginx が動的と静的の分離を実装する方法の例
目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...
Reactイベントメカニズムソースコード分析
目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...
MySQL 整合性制約の定義と例のチュートリアル
目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...
Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
Vue3 の参照と参照の詳細
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
トークン生成と検証を実装するミニプログラム
目次プロセスデモミニプログラムバックエンドインターフェースプロセス各リクエストインターフェースは検証...
Reactは動的ポップアップウィンドウコンポーネントを実装します
UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...