時計を生成する過程で、私はダイヤルを書くための次の方法を考えました。
もちろん、そのパターンを使用して達成できるため、最良の理解を使用する必要があり、コードには比較的簡単な方法があります。
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をもっとサポートできることを願っています。