Hur man får text att blinka i HTML: 10 steg (med bilder)

Steg
- Metod 1 av 2: Använd markeringstaggen
- Metod 2 av 2: Använda JavaScript
Tips
Varningar

Blinkande text har aldrig varit en del av HTMLs standardfunktioner och det finns inget tillvägagångssätt som fungerar för alla webbläsare. Det mest liknande alternativet som bara använder html är markeringstaggen, men även det fungerar inte med Google Chrome. Javascript är en mer pålitlig metod och du kan klippa ut och klistra in koden direkt i ditt HTML-dokument.

Steg

Metod 1 av 2: Använd markeringstaggen

1. Använd marquee-taggen endast för personliga projekt. Marquee-taggen är föråldrad och utvecklare rekommenderar starkt att du undviker den. Olika webbläsare kommer att visa det på olika sätt och framtida uppdateringar kan förhindra att texten blinkar helt. om du ska skapa en professionell webbplats.

Google Chrome stöder inte attributet "scrollamount", som den här metoden bygger på. I den webbläsaren rullar din text över sidan istället för att blinka.

Bild med titeln Make Text Blink in HTML Steg 2

2. Sätt in markeringsetiketterna runt den blinkande texten. Öppna ditt HTML-dokument i en enkel ordbehandlare. typ

Som alltid ställ in din HTML-sida först av

Bild med titeln Make Text Blink in HTML Steg 3

3. Ställ in textbredden. Ändra öppningstaggen till

Om din text inte passar kommer den att rulla istället för att blinka. Öka bredden för att undvika detta.

I Chrome rullar texten över ett avstånd som bestäms av dess bredd.

Bild med titeln Make Text Blink in HTML Steg 4

4. Ställ in scrollbeloppet till samma värde som bredden. Inom samma tagg du skriver scrollamount=`300` (eller samma nummer som bredden). Som standard rullar markeringsramstexten över skärmen. Genom att ställa in scrollbeloppet till samma nummer som bredden kommer texten att "rulla" i samma position som den var i innan. Detta ger en blinkande effekt.

Din text bör nu se ut ungefär så här:

Bild med titeln Make Text Blink in HTML Steg 5

5. Ändra rullningsfördröjningen. Öppna html-filen i en webbläsare för att se effekten. Om texten blinkar för snabbt eller för långsamt, ändra hastigheten med attributet scrolldelay=`500`. Standardfördröjningen är inställd på 85. Använd en högre siffra för en långsammare blinkning eller en lägre siffra för en snabbare blinkning.

Du bör nu ha:

Bild med titeln Make Text Blink in HTML Steg 6

6. Begränsa antalet blinkningar (valfritt). Många webbanvändare tycker att blinkande text är irriterande. För att stoppa animeringen när du har fått läsarens uppmärksamhet, skriv in loop=`7`. Nu blinkar texten sju gånger och försvinner sedan. (Du kan använda valfritt tal istället för sju.)

Den färdiga koden:

Metod 2 av 2: Använda JavaScript

Bild med titeln Make Text Blink in HTML Steg 7

1. Infoga ett blinkskript i rubriken på ditt HTML-dokument. Mellan

function blinktext() {
var f=dokument.getElementById(`meddelande`);
setInterval(function() {
f.stil.synlighet=(f.stil.synlighet==`dold` ? `` : `dold`);
}, 1000);
}

Bild med titeln Make Text Blink in HTML Steg 8

2. Infoga kommandot för att ladda ditt skript. Koden ovan definierade en funktion och kallade den "blinktext". För att använda den här funktionen i din HTML, ändra

Bild med titeln Make Text Blink in HTML Steg 9

3. Definiera din blinkande text som ett meddelande. Det här skriptet påverkar bara element med id:t "meddelande". Placera din blinkande text i varje element och ge det det ID:t. Skriv till exempel

Du kan byta namn på detta till vad du vill. Se bara till att du använder samma ord i skriptet och elementet id.

Bild med titeln Make Text Blink in HTML Steg 10

4. Anpassa skriptet. Siffran `1000` i skriptet ställer in fördröjningen mellan blinkningarna. Detta är i mikrosekunder, så ett värde på 1000 kommer att få texten att blinka en gång per sekund. Ändra detta till ett lägre nummer för att påskynda blinkningen eller ett högre nummer för att sakta ner.

Den faktiska fördröjningen kommer förmodligen inte att vara exakt lika med detta värde. Det är vanligtvis lite kortare, men kan ta längre tid om din webbläsare är upptagen med andra förfrågningar.

Tips

Du kan anpassa utseendet på markeringstexten med stilattributet. Testa att lägga till style=`border:solid`.
Du kan också inkludera ett höjdattribut i markeringstaggen förutom bredd, men många webbläsare ignorerar det. Du kan se skillnad om du lägger till en kant på tältet.
Du kan också använda CSS-animationer för att få text att blinka. Detta är ganska svårt och rekommenderas inte för nybörjare i CSS. Observera att du måste ha ett länkat CSS-dokument, eftersom Firefox inte stöder CSS-animationer med inline CSS.