Sådan får du tekst til at blinke i HTML: 10 trin (med billeder)

Indhold

Trin
- Metode 1 af 2: Brug af markeringsmærket
- Metode 2 af 2: Brug af JavaScript
Tips
Advarsler

Blinkende tekst har aldrig været en del af HTMLs standardfunktioner, og der er ingen tilgang, der virker for enhver browser. Den mest lignende mulighed, der kun bruger html, er markeringsmærket, men selv det virker ikke med Google Chrome. Javascript er en mere pålidelig metode, og du kan klippe og indsætte koden direkte i dit html-dokument.

Trin

Metode 1 af 2: Brug af markeringsmærket

1. Brug kun markeringsmærket til personlige projekter. Markeringsmærket er forældet, og udviklere anbefaler kraftigt at undgå det. Forskellige browsere vil vise det forskelligt, og fremtidige opdateringer kan forhindre teksten i at blinke helt. hvis du skal lave en professionel hjemmeside.

Google Chrome understøtter ikke `scrollamount`-attributten, som denne metode er afhængig af. I den browser ruller din tekst hen over siden i stedet for at blinke.

Billede med titlen Få tekst til at blinke i HTML Trin 2

2. Indsæt markeringsmærkerne omkring den blinkende tekst. Åbn dit html-dokument i et simpelt tekstbehandlingsprogram. type

Som altid opsæt først din HTML-side af

Billede med titlen Få tekst til at blinke i HTML Trin 3

3. Indstil tekstbredden. Skift åbningsmærket til

Hvis din tekst ikke passer, vil den rulle i stedet for at blinke. Forøg bredden for at undgå dette.

I Chrome ruller teksten over en afstand bestemt af dens bredde.

Billede med titlen Få tekst til at blinke i HTML Trin 4

4. Indstil rullemængden til samme værdi som bredden. Indenfor det samme tag du skriver scrollamount=`300` (eller det samme tal som bredden). Som standard ruller markeringsteksten hen over skærmen. Ved at indstille scrollbeløbet til det samme tal som bredden, vil teksten `rulle` i samme position, som den var i før. Dette giver en blinkende effekt.

Din tekst skulle nu se nogenlunde sådan ud:

Billede med titlen Få tekst til at blinke i HTML Trin 5

5. Skift rulleforsinkelsen. Åbn html-filen i en webbrowser for at se effekten. Hvis teksten blinker for hurtigt eller for langsomt, skal du ændre hastigheden med attributten scrolldelay=`500`. Standardforsinkelsen er indstillet til 85. Brug et højere tal for et langsommere blink eller et lavere tal for et hurtigere blink.

Du skulle nu have:

Billede med titlen Få tekst til at blinke i HTML Trin 6

6. Begræns antallet af blink (valgfrit). Mange internetbrugere synes, at blinkende tekst er irriterende. Indtast for at stoppe animationen, når du først har læserens opmærksomhed loop=`7`. Nu blinker teksten syv gange og forsvinder derefter. (Du kan bruge et hvilket som helst tal i stedet for syv.)

Den udfyldte kode:

Metode 2 af 2: Brug af JavaScript

Billede med titlen Få tekst til at blinke i HTML Trin 7

1. Indsæt et blink-script i overskriften på dit html-dokument. Imellem

funktion blinktekst() {
var f=dokument.getElementById(`meddelelse`);
sætinterval(funktion() {
f.stil.synlighed=(f.stil.synlighed==`skjult` ? `` : `skjult`);
}, 1000);
}

Billede med titlen Få tekst til at blinke i HTML Trin 8

2. Indsæt kommandoen for at indlæse dit script. Koden ovenfor definerede en funktion og kaldte den `blinktekst`. For at bruge denne funktion i din html, skal du ændre

Billede med titlen Få tekst til at blinke i HTML Trin 9

3. Definer din blinkende tekst som en meddelelse. Dette script påvirker kun elementer med id`et `meddelelse`. Placer din blinkende tekst inde i hvert element og giv det det id. For eksempel, skriv

Du kan omdøbe dette til hvad du vil. Bare sørg for at bruge det samme ord i scriptet og element-id`et.

Billede med titlen Få tekst til at blinke i HTML Trin 10

4. Tilpas scriptet. Tallet `1000` i scriptet indstiller forsinkelsen mellem blink. Dette er i mikrosekunder, så en værdi på 1000 vil få teksten til at blinke en gang i sekundet. Skift dette til et lavere tal for at fremskynde blinkingen eller et højere tal for at bremse det.

Den faktiske forsinkelse vil sandsynligvis ikke være nøjagtigt lig med denne værdi. Det er normalt lidt kortere, men kan tage længere tid, hvis din browser er optaget af andre anmodninger.

Tips

Du kan tilpasse udseendet af markeringsteksten med stilattributten. Prøv at tilføje style=`border:solid`.
Du kan også inkludere en højdeattribut i markeringsmærket ud over bredden, men mange browsere vil ignorere det. Du kan muligvis se en forskel, hvis du tilføjer en kant til rammen.
Du kan også bruge CSS-animationer til at få tekst til at blinke. Dette er ret svært og anbefales ikke til begyndere i CSS. Bemærk at du skal have et linket CSS-dokument, da Firefox ikke understøtter CSS-animationer med inline CSS.