JS+HTML erstellt Uhranimationen

Dieses Mal bringe ich Ihnen JS+HTML, um eine Uhranimation zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Uhranimation mit JS+HTML?

Die beteiligten Wissenspunkte sind: CSS3-Animation, DOM-Operationen, 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. Es muss erklärt werden, dass transform:rotate(-90deg); zum Drehen des Zeigers und transform-origin:0 6px verwendet wird.

<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, Position des Stundenzeigers berechnen

JS ruft die aktuelle Uhrzeit über das Date-Objekt ab, getHours ruft die Stunde ab, getMinutes ruft die Minute ab und getSeconds ruft die Sekunde 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, Uhrdrehung

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 liegt auch auf einem Kreis. Wir müssen nur den Radius bestimmen und dann die Koordinaten auf dem Radius ermitteln. Positionieren Sie einfach jede Zahl auf der linken Seite. Schauen Sie sich die Berechnungsregeln des Kreiskoordinatensystems an:

* Kreisradius-Koordinatenberechnung:
* x = PunktX + r*cos(Winkel);
* y = PunktY + r*sin(Winkel);
Beachten Sie jedoch, dass die von uns berechneten Koordinaten auf dem Bogen liegen Die Koordinaten des Punktes werden bei der Positionierung jeder Zahl basierend auf dem oberen linken Eckpunkt des Elements positioniert, sodass unsere Zahlen versetzt sind. 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('hour');//时针
 var minute = document.getElementById('minute');//分针
 var second = document.getElementById('second');//秒针
 var myClock = document.getElementById('clock');//时钟
 //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 = 'rotate('+hourDeg+'deg)';
  minute.style.transform = 'rotate('+minuteDeg+'deg)';
  second.style.transform = 'rotate('+secondDeg+'deg)';
 }
 //初始化执行一次
 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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung der Schritte zum Festlegen globaler Stile in Vue2.0

Detaillierte Erklärung der Umfang der Verwendung von js

Detaillierte Erläuterung zur Verwendung des Emergence.js-Plug-ins

Das obige ist der detaillierte Inhalt vonJS+HTML erstellt Uhranimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!