円錐形の勾配面でリアルタイムクロックを作成します

>

ただし、円錐形の勾配は強力ですが、しばしば見落とされます。このチュートリアルは、円錐勾配の機能を活用するユニークなクロックフェイスを作成することを示しています。

コニック勾配の理解

conic勾配は、中心点を回転させ、複数の色の値をサポートする色遷移を作成します。重要なのは、 conic-gradient（）関数内の値から値を回転または開始点を定義します。この角度はマイナスでさえあります。

背景イメージ：conic-勾配（45deg、＃6e7dab、＃5762d5から）; 

この簡単な例は、円錐勾配の優雅さを示しています。標準のクロックハンドマークアップであるため、Brevityのためにコードが省略されています）。これらの変数は、JavaScriptを使用して動的に更新されます。 - 時間級：0deg; - マニュートカラー：＃000; - マニュートハンドデグリーズ：0deg; - 秒洗面器：HotPink; - 秒程度：0deg;位置：相対;最小幅：320px;幅：25VW;高さ：25VW; Min-Height：320px;ボーダーラジウス：50％;マージン：0 Auto;国境：7pxソリッド＃000; }/ *クロックハンズスタイル */.hand {/ * ...（Brevityのために省略）... */}

transform-Origin プロパティは、正しい手回転を保証します。カスタムプロパティは、正確なタイムキーピングのためにjavaScriptで更新されたハンドアングルを管理します。

JavaScriptロジックの実装

setDate（）関数を定義し、

 const clock = document.getelementbyid（ "clock"）; function setDate（）{//時間の計算とハンド角の更新} setDate（）; //初期セットアップ

inside setDate（）、 date（）：

 const now = new date（）を使用して手角を計算します。 const secondsangle = now.getSeconds（） * 6; const minsangle = now.getMinutes（） * 6 seconsangle / 60; const hourangle =（（now.gethours（）％12） / 12） * 360 minsangle / 12;  <p>計算により、正確なハンドポジショニングが保証され、数秒、分、時間があります。次に、CSS変数を更新します。</p> <pre class="brush:php;toolbar:false"> clock.style.setProperty（ " -  second-hand-degrees"、senscynangle "deg"）; clock.style.setProperty（ " -  minute-hand-degrees"、minsangle "deg"）; clock.style.setProperty（ " -  hourhand-degrees"、hourangle "deg"）; 

、

、 setinterval（setdate、1000）は毎秒時計を更新します。

 .clock { / * ...（以前のスタイル）... * /  - スタート：0deg; -END：0DEG;背景：conic-勾配（var（ -  start）、rgb（255 255 255）2deg、rgb（0 0 0 / 0.5）var（ -  end）、rgb（255 255 255）2deg、rgb（0 0 / 0.7））; } 

- start および - end 変数を導入して、勾配の開始角と端の角度を制御します。 setDate（）関数は、これらの変数を計算および設定するために更新され、 minsangle がシームレスな遷移に負の角度を使用して hourangle を超えるケースを処理します。 （Gravient角度計算のためのJavaScriptコードは、 - start and -End 変数の簡単な更新であるため、 hourgany ）。さまざまな配色とスタイルを試して、独自の独自の時計デザインを作成します。

以上が円錐形の勾配面でリアルタイムクロックを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。