時計を生成する過程で、私はダイヤルを書くための次の方法を考えました。
もちろん、そのパターンを使用して達成できるため、最良の理解を使用する必要があり、コードには比較的簡単な方法があります。
1.三角関数を使用します
JSを使用してダイヤルを三角関数に配置する過程で、この状況に遭遇しました。ダイヤルのスケールで、三角測定関数を使用して特定の値を計算すると、整数を上下に丸める必要があります。最終効果を達成できるとしても、微妙なギャップと角度の逸脱は全体的な視覚体験に影響します。プログラム開発者として、このような視覚的な経験は、他の人に認識され、あきらめられることが困難です。
2。マスキング層を使用します
JSは、主にダイヤルスケールでマスキングレイヤーを使用します。ダイヤルスケールは長さと短く、5つのスケールごとにスケールが長くなります。このようにして、マスキング層を使用するスケールの長さは同じであり、他のスケールを調整し続けることは困難であるため、あきらめます。
3。使用率の位置決めと(父子関係)(推奨)
私は、ポジショニングと父子関係の方法を理解し、始めることが最善だと思います。ここであなたと共有します。これが実装コードです:
<!doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style media = "screen"> * {margin:0;パディング:0; } #clock {width:600px;高さ:600px;ボーダー:4px固体ライトグレイ。マージン:自動;位置:相対;ボーダーラジウス:50%; } #scale {width:20px;高さ:100%;位置:絶対;左:50%;マージン左:-10px; /*背景:緑;*/} #point {width:4px;高さ:10px;背景:LightGray;マージン:自動; } #number {width:20px;高さ:20px;マージントップ:5px; /*背景:red;*/ font-size:20px;テキストアライグ:センター;ラインハイト:20px; }#hour {width:12px;高さ:180px;背景:赤;ボーダーラジウス:6px;変換オリジン:50%150px;位置:絶対;上:150px;左:50%;マージン左:-6px; } #minute {width:8px;高さ:250px;背景:オレンジ;位置:絶対;ボーダーラジウス:4px;変換オリジン:50%200px;トップ:100px;左:50%;マージン左:-4px; } #second {width:4px;高さ:360px;背景:赤;ボーダーラジウス:2px;位置:絶対;上:0;左:50%;マージン左:-2px;変換オリジン:50%300px; z-index:100; } </style> </head> <body> <div id = "clock"> <div id = "hour"> </div> <div id = "minute"> </div> <div id = "second"> </div> </body> <script = "text/javascript"> var clock = documentelementbyid( 'clock'); var hour = document.getElementById( 'hour'); var minute = document.getElementById( 'minute'); var second = document.getElementById( 'second'); function Surface(){var currentDate = new Date(); var hours = currentdate.gethours(); var minutes = currentDate.getMinutes(); var seconds = currentDate.getSeconds();秒=時間 * 3600 +分 * 60 +秒; hour.style.transform = 'rotate('+seconds / 120+'deg)'; minute.style.transform = 'rotate('+seconds * 0.1+'deg)'; second.style.transform = 'rotate('+seconds * 6+'deg)'; } setInterval( 'Surface()'、1000); for(var i = 1; i <61; i ++){var scale = document.createelement( 'div'); scale.id = 'スケール'; scale.style.transform = 'rotate('+i * 6+'deg)'; clock.appendChild(scale); var point = document.createelement( 'div'); point.id = 'point'; Scale.AppendChild(Point); var number = document.createelement( 'div'); number.id = 'number'; number.style.transform = 'rotate( - '+i * 6+'deg)' if(i%5 == 0){number.innerhtml = i / 5; point.style.height = '15px'; } scale.AppendChild(number); } </script> </html>キャリブレーション中にメモを支払う必要があります。
1.以下は、段階的に実装されるレンダリング図です。最後に、詳細は密接に一致します。それを微調整するために他の方法は使用されていません。スタイルレイアウトが完了した後、現在の時刻を取得して修正できます。修正プロセス中にそのような問題があります。誰もが注意を払うことができることを願っています:時間のハンドの回転角を時間の単位で計算することはできません。たとえば、9:58現時点では、時間の指された時間の位置は9です。10:00の場合、時間の手の次の位置は10の位置にジャンプします。したがって、時間の手の角度を数分または秒で計算し、分の角度を分または秒で計算する必要があります。中古は1秒あたり6度ジャンプします。
2。注意すべきもう1つのことは、3つのポインターの回転中心を変換オリジンを使用して決定して、ポインターの回転点を決定する必要があることです。
上記の記事では、時計の生成(JS手書きの簡潔なコード)の生成について簡単に説明します。私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。