Einfache Methode zum Implementieren des JavaScript-HTML-Uhreffekts

Dieser Artikel stellt hauptsächlich den Fünf-Schritte-Code zur einfachen Implementierung des JavaScript-HTML-Uhreffekts vor. Ich hoffe, er kann jedem helfen.

Nachdem ich eine Zeit lang HTML, CSS und JS gelernt habe, werde ich eine schöne und nicht leistungsstarke HTML-Uhr für alle erstellen:

Die beteiligten Wissenspunkte sind: CSS3-Animation, DOM-Betrieb, Timer, Berechnung von Punktkoordinaten (viele Leute haben es bereits an ihre Lehrer zurückgegeben~)
Als nächstes verwenden wir 5 Schritte, um es zu erstellen

Schritt 1, HTML vorbereiten

Zuerst müssen wir die HTML-Struktur, den Hintergrund, das Zifferblatt, die Zeiger (Stundenzeiger, Minutenzeiger, Sekundenzeiger) und die Zahlen vorbereiten.

<p id="clock">
 <p class="bg">
  <p class="point">
   <p id="hour"></p>
   <p id="minute"></p>
   <p id="second"></p>
   <p class="circle"></p>
  </p>
 </p>
< /p>

Schritt 2, CSS vorbereiten

Definieren Sie die Farbe und Größe des Zeigers. Was erklärt werden muss, ist die Transformation :rotate( -90deg); wird verwendet, um den Zeiger zu drehen, transform-origin:0 6px wird verwendet, um den Rotationsmittelpunkt festzulegen.

<style>
 *{
  margin: 0;
  padding: 0;
 }
 #clock{
  margin: 5% auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  background: #aaa;
  position: relative;
  transform: rotate(-90deg);
 }
 #clock .bg{
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -180px;
  margin-top: -180px;
 }
 #clock .point{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -14px;
  margin-top: -14px;
 }
 #clock #hour{
  width: 80px;
  height: 16px;
  background: #000;
  margin: 6px 0 0 14px;
  /*transform: rotate(30deg);*/
  transform-origin:0 8px;
  /*animation: hour 3s linear 100!* alternate*!;*/
  border-radius: 16px;
 }

 #clock #minute{
  width: 120px;
  height: 12px;
  background: #000;
  margin: -14px 0 0 14px;
  transform-origin:0 6px;
  border-radius: 12px;
 }
 #clock #second{
  width: 160px;
  height: 6px;
  background: #f00;
  margin: -9px 0 0 14px;
  transform-origin:0 3px;
  border-radius: 6px;
 }
 #clock .point .circle{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
 }
 @keyframes hour {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
 }

 #clock .number{
  position: absolute;
  font-size: 34px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transform: rotate(90deg);
 }
< /style>

Schritt 3, Berechnen Sie die Stundenzeigerposition

JS ruft die aktuelle Uhrzeit über das Date-Objekt getHours ab ruft die Stunde ab, getMinutes ruft Minuten ab und getSeconds ruft Sekunden ab. Eine Umdrehung des Stundenzeigers beträgt 12 Unterteilungen und der Winkel jeder Unterteilung beträgt 360°/12. Die Minuten und Sekunden betragen jeweils 60 Unterteilungen und der Winkel jeder Unterteilung beträgt 360°/60.

function clock(){
 var date = new Date();//获取当前时间
 //时(0-23) 分(0-59)秒(0-59)
 //计算转动角度
 var hourDeg = date.getHours()*360/12;
 var minuteDeg = date.getMinutes()*360/60;
 var secondDeg = date.getSeconds()*360/60;
 //console.log(hourDeg, minuteDeg, secondDeg);
 //设置指针
 hour.style.transform = 'rotate('+hourDeg+'deg)';
 minute.style.transform = 'rotate('+minuteDeg+'deg)';
 second.style.transform = 'rotate('+secondDeg+'deg)';
}

Schritt 4, Uhrrotation

Stellen Sie den Timer über setInterval ein und aktualisieren Sie ihn jede Sekunde. Beachten Sie, dass die Initialisierung einmal ausgeführt werden muss, da sonst der Effekt erst 1 Sekunde später sichtbar wird.

//初始化执行一次
clock();
setInterval(clock,1000);

Schritt 5, Digitale Zeit zeichnen

Die digitale Zeit befindet sich ebenfalls auf einem Kreis, wir müssen es nur tun Bestimmen Sie den guten Radius und ermitteln Sie dann die Koordinaten des Radius. Positionieren Sie einfach jede Zahl auf der linken Seite. Schauen Sie sich die Berechnungsregeln des Kreiskoordinatensystems an:

* Berechnung der Kreisradiuskoordinaten:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
Beachten Sie jedoch, dass die von uns berechneten Koordinaten die Koordinaten des Punktes auf dem Bogen sind. Bei der Positionierung jeder Zahl wird diese basierend auf dem oberen linken Eckpunkt positioniert des Elements, so dass unsere Zahlen Es wird einen Versatz geben. Das heißt, der Mittelpunkt der Zahl liegt nicht auf dem Bogen. Die Lösung besteht darin, den Koordinatenpunkt (x, y) um die Hälfte seiner selbst (x-w/2, y-h/2) zu verschieben, sodass der Der Mittelpunkt der Zahl liegt auf dem Bogen.

var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
 var deg = Math.PI*2/12;//360°
 for (var i = 1; i <= 12; i++) {
  //计算每格的角度
  var angle = deg*i;
  //计算圆上的坐标
  var x = pointX + r*Math.cos(angle);
  var y = pointY + r*Math.sin(angle);
  //创建p,写入数字
  var number = document.createElement(&#39;p&#39;);
  number.className = &#39;number&#39;;
  number.innerHTML = i;
  //减去自身的一半, 让p的中心点在圆弧上
  number.style.left = x - 25 + &#39;px&#39;;
  number.style.top = y - 25 + &#39;px&#39;;
  //添加到页面
  myClock.appendChild(number);
 }
}

Vollständiger JS-Code:

<script>
 /***
  * 时钟:
  * 1> 旋转: rotate(90deg)
  * 2> 旋转中心点: transform-origin
  * */
 //TODO step1: 获取时钟的指针
 var hour = document.getElementById(&#39;hour&#39;);//时针
 var minute = document.getElementById(&#39;minute&#39;);//分针
 var second = document.getElementById(&#39;second&#39;);//秒针
 var myClock = document.getElementById(&#39;clock&#39;);//时钟

 //TODO step2: 获取当前时间,把指针放在正确的位置
 function clock(){
  var date = new Date();//获取当前时间
  //时(0-23) 分(0-59)秒(0-59)
  //计算转动角度
  var hourDeg = date.getHours()*360/12;
  var minuteDeg = date.getMinutes()*360/60;
  var secondDeg = date.getSeconds()*360/60;
  //console.log(hourDeg, minuteDeg, secondDeg);
  //设置指针
  hour.style.transform = &#39;rotate(&#39;+hourDeg+&#39;deg)&#39;;
  minute.style.transform = &#39;rotate(&#39;+minuteDeg+&#39;deg)&#39;;
  second.style.transform = &#39;rotate(&#39;+secondDeg+&#39;deg)&#39;;
 }
 //初始化执行一次
 clock();
 //TODO step3: 设置定时器
 setInterval(clock,1000);

 /***
  * 圆半径坐标计算：
  * x = pointX + r*cos(angle);
  * y = pointY + r*sin(angle);
  * */
 var pointX = 200;
 var pointY = 200;
 var r = 150;
 //TODO step4: 画时钟数字
 function drawNumber(){
  var deg = Math.PI*2/12;//360°
  for (var i = 1; i <= 12; i++) {
   //计算每格的角度
   var angle = deg*i;
   //计算圆上的坐标
   var x = pointX + r*Math.cos(angle);
   var y = pointY + r*Math.sin(angle);
   //创建p,写入数字
   var number = document.createElement(&#39;p&#39;);
   number.className = &#39;number&#39;;
   number.innerHTML = i;
   //减去自身的一半, 让p的中心点在圆弧上
   number.style.left = x - 25 + &#39;px&#39;;
   number.style.top = y - 25 + &#39;px&#39;;
   //添加到页面
   myClock.appendChild(number);
  }
 }
 drawNumber();
< /script>

Wie wäre es, wird es schon?

Verwandte Empfehlungen:

Detaillierte Erläuterung des JavaScript-Kreativuhrprojekts

Verwenden von Canvas zum Erstellen einer Uhr-Implementierungsschritte

JavaScript implementiert das Projekt „Creative Clock“

Das obige ist der detaillierte Inhalt vonEinfache Methode zum Implementieren des JavaScript-HTML-Uhreffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!