Mindre nummerovergang med kilometer

En av de effektive måtene å lage en presentasjon av numerisk informasjon er mer interessant, er å legge til en overgangsanimasjon . Opprettelse av overgangsanimasjon kan gjøres med javascript, men kodingen vil ta deg lang tid. For et raskere alternativ, prøv Odometer.

Odometer er et javascript-plugin som kan hjelpe deg med å gjøre din numeriske informasjon mer attraktiv med jevne overganger og kule temaer. Det er enkelt å sette opp og støttes på mange nåværende nettlesere.

Gjennomføring

Odometer er et frittstående javascript plugin . Du må bare inkludere js-filen og dens tema på siden din med følgende kode:

Du er ferdig! Nå vil ethvert element som du vikler sammen med odometer bli omgjort til et kilometertall.

I dette eksemplet bruker jeg et billignende kilometertema. Odometer kommer med seks andre forskjellige temaer, nemlig standard tema, digital, minimal, plaza, spilleautomat og togstasjon temaer. Du kan gå over til demo siden for å se dem i aksjon.

For å oppdatere verdien kan du bruke enten innfødt javascript eller en jQuery-kode. Først ring funksjonen setTimeout, og definer deretter den oppdaterte verdien som i følgende utdrag:

Eller du kan bruke et jQuery-skjema slik:

 setTimeout (funksjon () {$ ('. odometer'). html (5555);}, 1000); 

Verdien på 1000 i koden betyr at oppdateringsprosessen vil bli utført et sekund etter at siden er fullstendig lastet.

Deretter legger du til en odometer klasse til et hvilket som helst element du vil ha, for eksempel:

3252

Og verdien av 3252 vil da bli endret til 5555 (som definert tidligere) med en kul overgang.

alternativer

For mer avanserte funksjoner gir Odometer deg noen muligheter til å tilpasse. Dette er nyttig når standardinnstillingen ikke passer deg. For å kunne angi alternativer, må du først opprette et odometerOptions som slik:

format vil påvirke tallformatteringsregelen, som å vise et desimaltegn før bestemte siffer. (ddd) betyr at det ikke er noen desimaltegn i nummeret. Og for andre alternativer, sjekk ut følgende liste:

 window.odometerOptions = {auto: false, // Ikke initialiser alt automatisk med klassen 'odometer' velg: '.my-numbers', // Endre selgeren som brukes til å automatisk finne ting som skal animeres format: '(, ddd ) .dd ', // Endre hvor siffergrupper er formatert, og hvor mange sifre vises etter desimalpoengets varighet: 3000, // Endre hvor lenge javascript forventer at CSS-animasjonen skal ta tema:' bil ', // Angi temaet (hvis du har mer enn ett tema css-fil på siden) animasjon: 'count' // Count er en enklere animasjonsmetode som bare øker verdien, // bruker den når du leter etter noe mer subtilt. }; 

Konklusjon

For de som ofte presenterer numerisk informasjon og ønsker å gjøre det mer iøynefallende, er Odometer et godt valg. Bare vær oppmerksom på at hvis du skriver inn noe annet enn et nummer, vil plugin ikke fungere . Uansett, gi det et forsøk og gi oss beskjed om hva du synes!

10 beste automatiserte testrammer for PHP

Har du noen gang brukt lange timer på å feilsøke PHP-koden din? Vel, for de fleste programmerere er det sannsynligvis ikke den mest fascinerende utfordringen, men det er en løsning som kan hjelpe oss med å forkorte denne kjedelige oppgaven. Automatisert testing kan betydelig forbedre arbeidsflyten i PHP-utvikling ved å tillate forhåndsskrevne tester for å drive utviklingsprosessen .I dette

(Tekniske og design tips)

Lær barna å kode med Tynker

Med teknologi som er så utbredt som det er i disse dager, og nye programmeringsspråk lanseres annenhver dag, kommer det ikke som noen overraskelse at noen foreldre ser på å få barna til å plukke opp programmeringen i en tidlig alder.Folkene på Apple er sikkert godt klar over at programmører er avgjørende i denne teknologidrevne verden, og derfor har selskapet gått sammen med et firma som heter Tynker for å utvikle en pedagogisk iPad app som heter ... vel ...

(Tekniske og design tips)