ネイティブ JS で実装したリアルタイム クロック エフェクトを共有します。エフェクトは以下のとおりです (PS: 実際のポインタは 360 度動きますが、スクリーンショットを撮ったときにキャプチャされたのは一部だけです) 上記のエフェクトには、文字盤、時針、分針、秒針の合計 4 つの画像が必要です。必要に応じて独自の画像を作成できます。実装コードは次のとおりです。 <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <title>リアルタイムクロックを実装するネイティブ JS</title> <スタイル> .時計{ 幅: 600ピクセル; 高さ: 600px; マージン: 100px 自動; /*文字盤の背景*/ 背景: url(images/0.jpg) 繰り返しなし; 位置: 相対的; } .clock div { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; /* 時針の画像 */ 背景: url(images/1.png) 繰り返しなし 中央 中央; } #m { /* 分針画像*/ 背景画像: url(images/2.png); } #s { /* 中古写真 */ 背景画像: url(images/3.png); } </スタイル> </head> <本文> <div class="時計"> <div id="h"></div> <div id="m"></div> <div id="s"></div> </div> <スクリプト> // 要素を取得します var h = document.getElementById("h"); // 時間 var m = document.getElementById("m"); // 分 var s = document.getElementById("s"); // 秒 var timer = null; // 現在の時間に応じて各ボックスの回転角度をリアルタイムで変更します timer = setInterval(function () { var date = 新しい Date(); // 現在の日付の各時間部分に基づいてボックスの移動角度を計算します // 360/12 30 度/時間 h.style.transform = "rotate(" + date.getHours() * 30 + "deg)"; // 360/60/分 6 度/分 m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)"; // 360/60/秒 6 度/秒 s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)"; }, 1000); </スクリプト> </本文> </html> JavaScript クロックエフェクトの詳細については、こちらをクリックしてください: JavaScript クロックエフェクトの特別トピック 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル
コードをコピーコードは次のとおりです。 @文字セット "utf-8"; /* @...
以前はaタグのname属性を使ってジャンプする方法しか知らなかったのですが、idも使えることを今日知...
mysql は大文字と小文字を区別しないように設定されていますウィンドウズmysqlがインストールさ...
[必須] ユーザーインターフェースPhotoShop/花火デザインアーティストと協力して、スケッチを...
目次1. v-text テキストレンダリング命令2. v-html 1. v-text テキストレン...
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
デフォルトでは、ヘッダーの幅と高さはコンテンツに応じて自動的に調整されます。ヘッダーの幅と高さを手動...
パフォーマンス例えば: HTML: <div class="first"&...
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...
この記事は元々ブロガーのWeiwei Miaoによって書かれたものです。ブログホームページ: htt...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...