Fünf einfache Schritte zum Implementieren des JavaScript-HTML-Uhreffekts

Dieser Artikel stellt hauptsächlich den fünfstufigen Code zur einfachen Implementierung des JavaScript-HTML-Uhreffekts vor. Er hat bestimmte Referenzen und ist für das Erlernen von JavaScript von Nutzen. In diesem Artikel

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

Die beteiligten Wissenspunkte sind: CSS3-Animation, DOM-Betrieb, Timer, Punktkoordinatenberechnung (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, dass transform: rotation(-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 ab, getHours ruft die Stunde ab, getMinutes ruft die Minuten ab und getSeconds ruft die 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

Digitale Zeit ist auch auf einem Kreis, wir müssen nur den Radius bestimmen und dann die Koordinaten erhalten auf dem 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>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein! !

Verwandte Empfehlungen:

Drei Implementierungsmethoden von JavaScript-definierten Funktionen

So verwenden Sie Javascript, um zufällig eine bestimmte Anzahl von Passwörtern zu generieren

Instanz von Javascript, das die Verlaufsfarbe berechnet

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