suchen

Heim >Web-Frontend >js-Tutorial >Wie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?

Wie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?

PHPz
PHPznach vorne
2023-08-24 20:41:041220Durchsuche

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

In diesem Tutorial erstellen wir ein Projekt mit HTML, CSS und JavaScript, das zufällige Referenzen von einer API (type.fit) generiert.

Schritte

Wir werden einige grundlegende Schritte befolgen:

  • HTML-Elemente und -Vorlagen erstellen

  • Stile mit CSS hinzufügen

  • JavaScript-Logik

HTML-Elemente und -Vorlagen erstellen

Der erste Schritt ist Erstellen Sie HTML-Elemente und Vorlagen. Wir fügen zuerst ein Feld hinzu, in dem das Element angezeigt wird, und fügen dann eine Schaltfläche hinzu, die beim Klicken ein neues zufälliges Zitat im Feld anzeigt. Anschließend verwenden wir das Span-Tag, um das fantastische Symbol für die Schriftart „Zitatsymboltyp“ anzuzeigen.

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Random quote generator using HTML, CSS and JavaScript</title>
</head>
<body>
   <div class="boxSize">
   <h1>
   <i class="fas fa-quote-left"></i>
   <span class="QuoteText" id="QuoteText"></span>
   <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>
   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
</body>
</html>

Hinzufügen von Stilen mit CSS

Jetzt fügen wir dem HTML-Projekt, das wir geschrieben haben, Stile hinzu. Wir werden der Box Eigenschaften wie Boxschatten, Abstand und Rand hinzufügen, für den Autor werden wir die kursive Schriftfamilie verwenden und wir werden der Box und dem Text auch eine Hintergrundfarbe hinzufügen, damit sie großartig aussieht.

Wir werden an internem CSS arbeiten, um das Erstellen zusätzlicher Dateien zu vermeiden, aber das Erstellen externer Dateien für CSS und JavaScript wird als bewährte Vorgehensweise angesehen.

Wir werden in unserem Kopf einen CDN Font Awesome-Link hinzufügen, um Font Awesome-Symbole in unserer Anwendung zu verwenden. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

CSS

body{
   min-height:100vh;
   transition: 0.5s;
   display: flex;
   background-color: #A4E5E0;
   align-items: center;
   justify-content: center;

}
.boxSize {
   margin: 10px;
   border-radius: 10px;
   width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
   background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
   font-size: 35px;
   color: blue;
}
.QuoteText {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
}
.author {
   margin:10px;
   text-align: right;
   font-size: 25px;
   font-style: italic;
   font-family: cursive;
}
.QuoteBtn {
   width: 100%;
   display: flex;
   margin-top:10px;
}
.GenerateQuote_next {
   font-size:18px;
   border-radius: 5px;
   cursor:pointer;
   padding: 10px;
   margin-top: 5px;
   font-weight: bold;
   color: white;
   background-color: #2C5E1A
}
.GenerateQuote_next:hover{
   background-color: black;
}

JavaScript-Logik

Jetzt kommt der logische Teil ins Spiel. Dieser Teil wird das JavaScript sein. Wir werden definieren, welche Elemente welche Arbeit leisten und die API verwenden, um die Daten abzurufen und anzuzeigen. Lassen Sie uns also einen tieferen Einblick in das Ganze erhalten Tauchen Sie ein in unsere JavaScript-Funktion.

Schritte

Wir müssen die folgenden Schritte befolgen, um unsere Arbeit abzuschließen -

  • Angebotsdaten von der type.fit-API abrufen.

  • Die empfangenen Daten werden im Array gespeichert.

  • Holen Sie sich eine zufällige Indexvariable mit dem Namen „randomIdx“.

  • Dann stellen Sie die maximale Größe von „randomIdx“ auf die Länge der Angebotsliste ein.

  • Holen Sie sich das Zitat und den Autor mithilfe des generierten Zufallsindex.

  • Nun weisen wir den erhaltenen Wert dem Element Element zu.

JavaScript

var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
console.log (quoteText);
console.log (auth);

Lassen Sie uns JavaScript-Funktionscode einbetten, damit es funktioniert.

Beispiel – Vollständiges Programm

Unten finden Sie das vollständige Programm zum Erstellen eines Zufallsangebotsgenerators. 




   Ramdom quote generator using HTML, CSS and JavaScript
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
   


   

   

      
      
      
   

   


   

   

   
   

   

   <script>
      const GenerateQuote = async () =>{
         var url="https://type.fit/api/quotes";

         const response=await fetch(url);
         const Quote_list = await response.json();
         const randomIdx = Math.floor(Math.random()*Quote_list.length);
         const quoteText=Quote_list[randomIdx].text;
         const auth=Quote_list[randomIdx].author;
         
         if(!auth) author = "Anonymous";
         document.getElementById("QuoteText").innerHTML=quoteText;
         document.getElementById("author").innerHTML="~ "+auth;
      }
      GenerateQuote();
   </script>

Wir haben also gelernt, wie man eine Angebotsgenerator-App erstellt und hoffen, dass es hilft.

Das obige ist der detaillierte Inhalt vonWie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：JavaScript vs. Core Java: Was ist besser?Nächster Artikel：JavaScript vs. Core Java: Was ist besser?

In Verbindung stehende Artikel

Mehr sehen