W tym tutorialu nauczymy się jak utworzyć prosty skrypt w JavaScript, który automatycznie będzie wyświetlał losową treść za każdym razem, gdy użytkownik odświeży stronę.
Krok pierwszy
W pierwszej kolejności musimy utworzyć dwa pliki: index.html i javascript.js.
?
Krok drugi
Teraz otwórz plik index.html jakimkolwiek edytorem tekstu i napisz poniższy kod HTML:
Jak wyświetlać losową treść przy użyciu JavaScript
To jest pierwszy news z linkiem treści.
To jest drugi news. W tym bloku <div> możesz napisać co chcesz.
To jest trzeci news z tekstem pogrubionym.
To jest czwarty news z tekstem pisanym kursywą i listą nieuporządkowaną:
- Przykład1
- Przykład2
- Przykład3
Powyższa treść zmieni się za każdym razem, gdy odświeżysz stronę.
Zobacz cały tutorial pod tym adresem: http://www.magazynt3.pl
Po napisaniu wszystkich tych wierszy kodu bez użycia jakichkolwiek stylów CSS lub JavaScript, nasz dokument HTML będzie pokazywał całą treść od razu. A nie o to nam przecież chodzi.
Krok trzeci
Zatem aby wszystko zaczęło działać jak należy, otwórz plik javasript.js jakimkolwiek edytorem tekstu. Teraz będziemy musieli stworzyć:
randomNumber = Math.floor(Math.random()*4+1);
window.onload = function() {
if (randomNumber == 1) {
document.getElementById("news1").style.display = "inline";
document.getElementById("news2").style.display = "none";
document.getElementById("news3").style.display = "none";
document.getElementById("news4").style.display = "none";
}
if (randomNumber == 2) {
document.getElementById("news1").style.display = "none";
document.getElementById("news2").style.display = "inline";
document.getElementById("news3").style.display = "none";
document.getElementById("news4").style.display = "none";
}
if (randomNumber == 3) {
document.getElementById("news1").style.display = "none";
document.getElementById("news2").style.display = "none";
document.getElementById("news3").style.display = "inline";
document.getElementById("news4").style.display = "none";
}
if (randomNumber == 4) {
document.getElementById("news1").style.display = "none";
document.getElementById("news2").style.display = "none";
document.getElementById("news3").style.display = "none";
document.getElementById("news4").style.display = "inline";
}
}
Krok czwarty – rozumienie kodu
W tym kroku wyjaśnię jak działa powyżej zaprezentowany kod JavaScript.
randomNumber – Jest to zmienna, której nazwę możesz dowolnie zmienić. Pamiętaj jednak o podmienieniu starej nazwy na nową w całym skrypcie.
Math.floor(liczba) ? zwraca liczbę typu integer. Dla przykładu:
Math.random() ? zwraca liczbę pomiędzy 0 i 1. W naszym przypadku Math.random()*4 zwraca cyfrę pomiędzy 0 i 3. Jako, że potrzebujemy cyfry z zakresu od 1 do 4, to musimy do zwróconego wyniku dodać 1. Dla przykładu:
window.onload = function() { kod } ? Ten element tworzy całą naszą funkcję. Gdy strona jest ładowana kod wewnątrz tej funkcji zostanie uruchomiony tylko raz. Jeśli odświeżysz stronę kod zostanie uruchomiony ponownie, i tak dalej.
document.getElementById(?news1?).style.display = ?inline?; – Ta funkcja wybierze element o określonym ID z naszego dokumentu HTML (w tym przypadku ?news1?). Następnie zostanie ustalona wartość CSS na ?inline? lub ?none?.
