TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Einfaches Digitaluhr-Widget für Weebly

3

In unserem früheren Artikel haben wir erklärt, wie Sie mit HTML5 Canvas JavaScript eine Uhr im analogen Stil erstellen. Lassen Sie uns ein einfaches Digitaluhr- Widget für die Weebly- Site erstellen. Das Widget holt sich die Uhrzeit von der Uhr Ihres Computers und zeigt die Uhrzeit in Stunden, Minuten und Sekunden an. Unten sehen Sie, wie das Widget aussehen wird.

Das Widget enthält CSS-, JavaScript- und HTML-Teile und wir werden nacheinander im Detail erklären.

JavaScript für Digitaluhr

Unten ist das Skript, um die Stunden, Minuten und Sekunden von der Uhr Ihres Computers zu erhalten. Die erste Skriptzeile ist der Link zur jQuery-Bibliothek des Skripts, damit das Widget funktioniert.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script>

Hinweis: Falls das Skript auf Ihrer Weebly-Site nicht funktioniert, ersetzen Sie die Variable $ durch jQuery und veröffentlichen Sie die Site erneut.

CSS für das Widget

Das CSS hat drei Klassen – .time, .clock und .align. Die Klasse „.time” wird verwendet, um die Uhrennummern auszurichten, während die Klasse „.clock” verwendet wird, um die Uhrenstile einzurichten. Die Klasse „.align” wird einfach verwendet, um den Rand und die Schriftgröße anzupassen.

<style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style>

HTML für das Widget

Unten ist der HTML-Code für das Widget:

<div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div>

Der Doppelpunkt: dient als Trennzeichen zwischen Stunden, Minuten und Sekunden.

Vollständiger Code für das Digitaluhr-Widget

Das vollständige Widget sieht wie folgt aus, indem Sie Skript, CSS und HTML zusammenfügen.

<html> <head> <style> .time { display: inline-block; color: #fff; } .clock { border: 1px solid yellow; border-radius: 5px; background-color: darkslateblue; text-align: center; color: #fff; } .align { margin: 15px; font-size: 40px; font-weight: 700; } </style> </head> <body> <div class="clock"> <div class="align"> <a><span class="time hours"></span></a>: <a><span class="time minutes"></span></a>: <a><span class="time seconds"></span></a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function() { setInterval( function() { var hours = new Date().getHours(); $(".hours").html(( hours < 10? "0": "") + hours); }, 1000); setInterval( function() { var minutes = new Date().getMinutes(); $(".minutes").html(( minutes < 10? "0": "") + minutes); },1000); setInterval( function() { var seconds = new Date().getSeconds(); $(".seconds").html(( seconds < 10? "0": "") + seconds); },1000); }); </script> </body> </html>

Einfügen des Widgets in die Weebly Site

Es gibt viele Möglichkeiten, das Digitaluhr-Widget in Ihre Weebly-Site einzufügen.

  • Fügen Sie den vollständigen Code auf der gewünschten Seite mit dem embed code element ein.
  • Fügen Sie das Skript unter dem Fußzeilencodeabschnitt und das CSS und HTML in das Einbettungscodeelement ein.
  • Fügen Sie HTML in das Einbettungscodeelement, CSS unter den Header-Codeabschnitt und Skript unter den Footer-Codeabschnitt ein.

Anpassen des Widgets

Passen Sie die folgenden CSS-Eigenschaften an, um das Widget an Ihre Bedürfnisse anzupassen:

  • Ändern Sie die Hintergrundfarbe, indem Sie "darkslateblue" in "background-color: darkslateblue;" ändern.
  • Ändern Sie die Farbe der Zahlen, indem Sie „color:#fff;” ändern. Eigenschaft unter der Klasse „.time”.
  • Ändern Sie die Farbe des Trennzeichens mit „color:#fff;” unter der Klasse „.clock”.
  • Schriftstärke, Rand und Schriftgröße können mit den Klasseneigenschaften „.align” angepasst werden.

Nachfolgend finden Sie einige Beispiele für Digitaluhren mit verschiedenen Farbvariationen. Die Uhren werden nebeneinander in der Weebly-Site mit dem Einbettungscodeelement platziert. Sie können die Digitaluhren-Demo auf der Weebly-Site hier ansehen .

Einfaches Digitaluhr-Widget für Weebly

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen