Das Anzeigen der Zeit ist im Web sehr beliebt. Aber es ist nicht auf das beschr\u00e4nkt, was wir normalerweise am Handgelenk tragen oder an der Wand h\u00e4ngen.<\/p>\n
Nat\u00fcrlich kann eine traditionelle Uhr die \u00c4sthetik einer Website oder App verbessern. Dies ist jedoch in bestimmten Situationen sehr n\u00fctzlich, da die Bildschirme unserer Ger\u00e4te bereits die Grundlagen zeigen.<\/p>\n
Ein Bereich, in dem die Zeit wirklich scheint, ist das Hoch- oder Herunterz\u00e4hlen. Unabh\u00e4ngig davon, ob Sie die Zeit seit einem Ereignis wie einem Online-Quiz oder die Anzahl der Tage bis zur Einf\u00fchrung eines gro\u00dfartigen Produkts anzeigen, k\u00f6nnen diese Elemente f\u00fcr ein wenig Aufregung sorgen. Dar\u00fcber hinaus k\u00f6nnen sie eine wichtige Rolle f\u00fcr die allgemeine Benutzererfahrung spielen.<\/p>\n
Schauen wir uns einige Codefragmente an, mit denen Sie zeitbezogene Funktionen in Ihre Projekte integrieren k\u00f6nnen.<\/p>\n
Obwohl unser erstes Beispiel f\u00fcr traditionellere Uhren verwendet werden kann, sieht es auch hochmodern aus. Es wurde mit Vue.js erstellt und zeigt, wie Design den grundlegendsten Technologien einen Hauch von Pers\u00f6nlichkeit verleihen kann.<\/p>\n
Siehe Toshiyuki TAKAHASHI Kugelschreiber mit Vue.js Digitaluhr.<\/p>\n
Eine Uhr aus … Uhren? Es mag distanziert erscheinen, aber darum geht es in diesem CSS-Snippet. Beobachten Sie, wie sich die \u201eZeiger\u201c der ausgew\u00e4hlten Mini-Uhren gemeinsam \u00e4ndern, um die verstrichene Zeit zu z\u00e4hlen. Wie bei den besten Schweizer Uhren sind die Uhrwerke unglaublich komplex.<\/p>\n
Uhr Razvan Spatariu Uhr Kugelschreiberuhr<\/p>\n
Countdowns werden h\u00e4ufig verwendet, um Vorfreude auf ein Gro\u00dfereignis zu erzeugen. Vielleicht ist es ein neues Produkt, eine Konferenz oder sogar eine Filmpremiere. Sie sind gleicherma\u00dfen lustig und n\u00fctzlich. Dieses attraktive Beispiel bietet einen 24-Stunden-Countdown im klassischen Flip-Stil.<\/p>\n
Sehen Sie sich Dorian Camilleris Countdown an<\/p>\n
Ein Countdown kann auch E-Commerce-Websites zugute kommen, die sich auf einen bestimmten Urlaub konzentrieren m\u00f6chten. In diesem Fall ist Unabh\u00e4ngigkeitstag in den Vereinigten Staaten. Aber ein Gegenstand in dieser Verkleidung kann eine gro\u00dfartige Note f\u00fcr fast jeden besonderen Tag sein, auf den Sie aufmerksam machen m\u00f6chten.<\/p>\n
Siehe DailyUI Pen # 014 Timer von Julie Park<\/p>\n
Begr\u00fc\u00dfungsbildschirme scheinen zur\u00fcckzukommen. Anstatt den Benutzern zu erlauben, auf den n\u00e4chsten Schritt zu klicken, kann eine zeitgesteuerte Weiterleitung eine gute M\u00f6glichkeit sein, Ihre Meinung ohne zu viel Arbeit zu \u00e4u\u00dfern. Diese Countdown-Animation f\u00fcr Filme der alten Schule k\u00f6nnte perfekt f\u00fcr diese Verwendung sein.<\/p>\n
Sehen Sie sich Craig Roblewskys Film-Countdown im Federstil an<\/p>\n
Luxusuhren kommen nie aus der Mode. Mit einem sch\u00f6nen Aussehen und pr\u00e4zisen Bewegungen regen sie die Fantasie an. Hier haben wir eine originalgetreue Nachbildung einer Rolex-Uhr. Es ist vielleicht nicht jeden Tag so n\u00fctzlich f\u00fcr Ihre Website, aber es ist etwas zu bewundern.<\/p>\n
Schauen Sie sich den Rolex Oyster Perpetual Submariner-Stift an: Chris Otas reine HTML \/ CSS-Illustration<\/p>\n
Stoppuhren sind ein Synonym f\u00fcr Sport und werden verwendet, um alles von olympischen Rennen bis zur Formel 1 zu messen. In diesem Sinne ist diese reine CSS-Erholung einfach und sch\u00f6n. Die Bewegung ist bemerkenswert, ohne \u00fcberw\u00e4ltigend zu sein.<\/p>\n
Schauen Sie sich den Timer auf dem Hilo-Stift an<\/p>\n
Die wahrscheinlich relevanteste Verwendung f\u00fcr eine Online-Uhr ist die Anzeige von Messwerten aus mehreren Zeitzonen. Dieses gro\u00dfartige Snippet verwendet Vue.js und nutzt den Browser, um die Zeit auf der ganzen Welt anzuzeigen. Beachten Sie, wie sich die Anzeige je nach Uhrzeit am ausgew\u00e4hlten Ort von Tag zu Nacht \u00e4ndert.<\/p>\n
Siehe Pen Vue-Zeitvergleich von Sarah Drasner<\/p>\n
Die Bereitstellungszeit, unabh\u00e4ngig von der Form, f\u00fcgt Ihrem Projekt eine zus\u00e4tzliche Detailebene hinzu. Obwohl dies nicht unbedingt das Hauptmerkmal ist, kann es als Informations- und Unterhaltungsmittel dienen.<\/p>\n
Zus\u00e4tzlich zu ihrer N\u00fctzlichkeit im Webdesign sind diese Uhren und Timer auch eine hervorragende Einf\u00fchrung in die Funktionsweise von Sprachen wie JavaScript. Wenn Sie sich eines der obigen Codefragmente ansehen, werden Sie verstehen, wie diese verschiedenen Codefragmente kombiniert werden.<\/p>\n
Egal, ob Sie Ihrer Website Interaktivit\u00e4t hinzuf\u00fcgen oder es einfach ausprobieren m\u00f6chten, in dieser Sammlung ist etwas f\u00fcr Sie dabei. Weitere Beispiele finden Sie in unserer CodePen-Sammlung.<\/p>\n ","protected":false},"excerpt":{"rendered":"
Das Anzeigen der Zeit ist im Web sehr beliebt. Aber es ist nicht auf das beschr\u00e4nkt, was wir normalerweise am Handgelenk tragen oder an der Wand h\u00e4ngen. Nat\u00fcrlich kann eine traditionelle Uhr die \u00c4sthetik einer Website oder App verbessern. Dies ist jedoch in bestimmten Situationen sehr n\u00fctzlich, da die Bildschirme unserer Ger\u00e4te bereits die Grundlagen […]<\/p>\n","protected":false},"author":1,"featured_media":31651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/Keeping-Time-una-coleccion-de-fragmentos-de-temporizador-y-codigo.png","fifu_image_alt":""},"categories":[7],"tags":[30,6472,3140,5589,6473,22],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/31650"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=31650"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/31650\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/31651"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=31650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=31650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=31650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}