Heim > Web-Frontend > js-Tutorial > Hauptteil

JS+HTML erstellt Uhranimationen

php中世界最好的语言
Freigeben: 2018-04-14 15:25:19
Original
2268 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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)';
}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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:

五步轻松实现JavaScript HTML时钟效果

* 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);
 }
}
Nach dem Login kopieren
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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage