1. エフェクト表示
http://xiazai.jb51.net/202103/yuanma/Watch_jb51.rar 2. ソースコード
<html> <ヘッド> <title>宇宙飛行士ダイヤル</title> <メタ文字セット="UTF-8"> <link href="./assets/css/style.css" rel="外部nofollow" rel="スタイルシート"> <script src="./assets/js/timeGeneration.js"></script> </head> <本文> <div class="jun-meter"> <div class="jun-time-hh" id="hh"></div> <div class="jun-time-hl" id="hl"></div> <div class="jun-time-rect"></div> <div class="jun-human"></div> <div class="jun-time-mh" id="mh"></div> <div class="jun-time-ml" id="ml"></div> <div class="jun-time-sh" id="sh"></div> <div class="jun-time-sl" id="sl"></div> <div class="jun-date" id="date"></div> <div class="jun-calendar-date" id="calendarDate"></div> </div> </本文> <スクリプト> 関数 WatchMeter() { // DOMを初期化する this._initDom() // 更新 this.update() this.date = 新しい TimeGeneration() this._render(this.date.getDate()、this.date.getCalendarDate()、this.date.getTime()) の順にクリックします。 } // プロトタイプを変更する WatchMeter.prototype = { コンストラクター: WatchMeter、 // Dom を初期化する _initDom: 関数 () { this.elem = {} this.elem.hh = document.getElementById('hh') this.elem.hl = document.getElementById('hl') this.elem.mh = document.getElementById('mh') this.elem.ml = document.getElementById('ml') this.elem.sh = document.getElementById('sh') this.elem.sl = document.getElementById('sl') this.elem.date = document.getElementById('date') this.elem.calendarDate = document.getElementById('calendarDate') }, // 更新 update: function () { var _this = これ setInterval(関数() { _this._render(_this.date.getDate()、_this.date.getCalendarDate()、_this.date.getTime()) の順にクリックします。 }, 1000) }, // Rendering_render: function (date, calendarDate, time) { this._setNumberImage(this.elem.hh、time[0]) は、 this._setNumberImage(this.elem.hl, 時間[1]) this._setNumberImage(this.elem.mh、時間[2]) this._setNumberImage(this.elem.ml、時間[3]) this._setNumberImage(this.elem.sh、時間[4]) this._setNumberImage(this.elem.sl, 時間[5]) this.elem.date.innerText = 日付[2] + " " +日付[0] + "-" +日付[1] this.elem.calendarDate.innerText = カレンダーの日付 }, // デジタル画像を設定する_setNumberImage: function (elem, value) { elem.style.backgroundImage = "url(./assets/img/" + 値 + ".svg)"; } } var myWatchMeter = 新しい WatchMeter() </スクリプト> </html>
// 太陰暦とグレゴリオ暦の時刻を生成する function TimeGeneration() { } TimeGeneration.prototype = { コンストラクタ: TimeGeneration、 WEEKDAY_NAME: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"], NUMBER_STRING: 「1 2 3 4 5 6 7 8 9 10」、 MONTH_STRING: "月、火曜日、水曜日、木曜日、金曜日、土曜日、土曜日、8月、9月、冬", 月追加: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334], Calendar_data:[0xa4b、0x5164b、0x6a5、0x6d4、0x415b5、0x2b6、0x957、0x2092f、0x497、0x60c96、0xd4a、0xea5、0x50da9 、0xc95、0xd4a、0x61b4a、0xb55、0x56a、0x4155b、0x25d、0x92d、0x2192b、0xa95、0x71695、0x6ca、0xb555、0x4da、0x52 a、0xe95、0x6aa、0x615aa、0xab5、0x4b6、0x414ae、0xa57、0x526、0x31d26、0xd95、0x70b55、0x56a、0x96d、0x4ad、0x4ad、0x41a 5、0xb54、0xb6a、0x612da、0x95b、0x49b、0x41497、0xa4b、0xa164b、0x6a5、0x6d4、0x615b4、0xab6、0x957、0x492f 5、0x5ac、0xab6、0x5126d、0x92e、0xc96、0x41a95、0xd4a、0x20b55、0x56a、0x7155b、0x25d、0x92d、0x5192b、0xa95、0xxb4a 、0x4ba、0xa5b、0x60a57、0x52b、0xa93、0x40e95]、 _getBit: 関数 (m, n) { (m >> n) & 1 を返します。 }, // 時間配列を取得する getTime: 関数 () { var time = 新しい Date(); [parseInt(time.getHours() / 10) を返す。 parseInt(time.getHours() % 10)、 parseInt(time.getMinutes() / 10)、 parseInt(time.getMinutes() % 10)、 parseInt(time.getSeconds() / 10)、 parseInt(time.getSeconds() % 10)] }, // グレゴリオ暦の日付配列を取得します getDate: 関数 () { var date = 新しい Date(); 戻る [ date.getMonth() + 1、 日付.getDate()、 this.WEEKDAY_NAME[date.getDay()] ] }, // 太陰暦の日付文字列を取得します getCalendarDate: 関数 () { var カレンダー = 新しい日付(); var tmp = カレンダー.getFullYear(); (tmp < 1900)の場合{ 1900 秒 } var total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + this.MONTH_ADD[calendar.getMonth()] + calendar.getDate() - 38; (calendar.getFullYear() % 4 == 0 &&calendar.getMonth() > 1)の場合{ 合計++; } var isEnd = false; var n、m、k (m = 0; ; m++) の場合 { k = (this.CALENDAR_DATA[m] < 0xfff) ? 11 : 12; (n = k; n >= 0; n--) の場合 { 合計 <= 29 + this._getBit(this.CALENDAR_DATA[m], n) の場合 { isEnd = true; 壊す; } 合計 = 合計 - 29 - this._getBit(this.CALENDAR_DATA[m], n); } if (isEnd) ブレーク; } var 月 = k - n + 1; var 日 = 合計; (k == 12)の場合{ 月 == Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1 の場合 月 = 1 - 月; } if (月 > Math.floor(this.CALENDAR_DATA[m] / 0x10000) + 1) { 月 - ; } } var tmp = ""; (月 < 1) の場合 { tmp += "(うるう年)"; tmp += this.MONTH_STRING.charAt(-month - 1); } それ以外 { tmp += this.MONTH_STRING.charAt(月 - 1); } tmp += "月"; tmp += (day < 11) ? "始まり" : ((day < 20) ? "10" : ((day < 30) ? "20" : "30")); (日 % 10 != 0 || 日 == 10) の場合 { tmp += this.NUMBER_STRING.charAt((day - 1) % 10); } tmp を返します。 } }
.jun-meter { 位置: 相対的; 幅: 640ピクセル; 高さ: 640px; 背景画像: url("../img/ring.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; マージン: 自動; 上マージン: 7%; } .jun-time-rect { 位置: 絶対; 幅: 30ピクセル; 高さ: 80px; 左: 275px; 上: 180px; 背景画像: url("../img/rect.svg"); 背景サイズ: 40px 40px; } .jun-time-hh { 位置: 絶対; 幅: 100ピクセル; 高さ: 100px; 左: 140px; 上: 170px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .jun-time-hl { 位置: 絶対; 幅: 100ピクセル; 高さ: 100px; 左: 200px; 上: 170px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .jun-time-mh { 位置: 絶対; 幅: 100ピクセル; 高さ: 100px; 左: 290px; 上: 170px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .jun-time-ml { 位置: 絶対; 幅: 100ピクセル; 高さ: 100px; 左: 350ピクセル; 上: 170px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .jun-time-sh { 位置: 絶対; 幅: 60ピクセル; 高さ: 60px; 左: 430ピクセル; 上: 208px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .jun-time-sl { 位置: 絶対; 幅: 60ピクセル; 高さ: 60px; 左: 470ピクセル; 上: 208px; 背景画像: url("../img/8.svg"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } .6月カレンダー日付{ 位置: 絶対; 幅: 120ピクセル; 高さ: 30px; 左: 460ピクセル; 上: 310px; 行の高さ: 30px; フォントサイズ: 20px; テキスト配置: 中央; } .6月日付{ 位置: 絶対; 幅: 120ピクセル; 高さ: 30px; 左: 460ピクセル; 上: 345px; 行の高さ: 30px; フォントサイズ: 20px; テキスト配置: 中央; } .jun-人間{ 位置: 絶対; 幅: 150ピクセル; 高さ: 150px; 左: 250px; 上: 280px; 背景画像: url("../img/human.gif"); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; } これで、JavaScript をベースにした有名人宇宙飛行士ウォッチフェイスを実装するための完全なコードに関する記事は終了です。JavaScript を使用した有名人宇宙飛行士ウォッチフェイスの実装の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。 以下もご興味があるかもしれません:
|
<<: MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明
>>: Linux環境でglogログライブラリを使用する方法
目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...
テクノロジーファンHTMLウェブページ、知っておくべきYouyou が開発した vue フロントエン...
2.1 セマンティクス化により、Webページが検索エンジンに理解されやすくなりますこの章では、We...
まず、GB2312、GBK、UTF-8 はすべて文字エンコーディングであることを理解する必要がありま...
目次プロキシ転送ルール最初のもの: 2番目のタイプ: 3番目のタイプ: 4番目のタイプ: 5番目:プ...
目次環境説明Windows 10 に Docker for Windows をインストールするWin...
イメージをダウンロードします(オプションの手順です。省略した場合は、手順 3 と 4 で自動的にイン...
nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...
この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...
この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...
目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...
まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...
目次1. 関連構成ケース1(使用ツールはvue-cil)ケース2(使用するツールはwebpack) ...
tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用する必要があります...