interface Web
Questions et réponses frontales
Quels sont les exemples fonctionnels implémentés par javascript ?
Quels sont les exemples fonctionnels implémentés par javascript ?
JavaScript est un langage de script couramment utilisé dans la conception et le développement d'interactivité de pages Web. Aujourd'hui, nous allons présenter quelques exemples fonctionnels pratiques implémentés en JavaScript.
- Calculatrice simple
JavaScript peut être utilisé pour créer des calculatrices simples. Cet extrait de code utilise les boutons et les zones de saisie en HTML et JavaScript pour gérer la logique de la calculatrice. L'utilisateur saisit des nombres, des opérateurs et des opérandes, puis clique sur le signe égal pour exécuter le calcul et afficher le résultat.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Simple Calculator</title> </head> <body> <form name="calculator"> <input type="text" name="answer" id="answer"> <br> <input type="button" value=" 1 " onclick="calculator.answer.value += '1'"> <input type="button" value=" 2 " onclick="calculator.answer.value += '2'"> <input type="button" value=" 3 " onclick="calculator.answer.value += '3'"> <input type="button" value=" + " onclick="calculator.answer.value += '+'"> <br> <input type="button" value=" 4 " onclick="calculator.answer.value += '4'"> <input type="button" value=" 5 " onclick="calculator.answer.value += '5'"> <input type="button" value=" 6 " onclick="calculator.answer.value += '6'"> <input type="button" value=" - " onclick="calculator.answer.value += '-'"> <br> <input type="button" value=" 7 " onclick="calculator.answer.value += '7'"> <input type="button" value=" 8 " onclick="calculator.answer.value += '8'"> <input type="button" value=" 9 " onclick="calculator.answer.value += '9'"> <input type="button" value=" * " onclick="calculator.answer.value += '*'"> <br> <input type="button" value=" c " onclick="calculator.answer.value = ''"> <input type="button" value=" 0 " onclick="calculator.answer.value += '0'"> <input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)"> <input type="button" value=" / " onclick="calculator.answer.value += '/'"> <br> </form> </body> </html>
- Countdown Timer
JavaScript peut être utilisé pour créer des comptes à rebours qui comptent à rebours à partir d'une date et d'une heure spécifiées jusqu'à une heure cible spécifique. Cet extrait de code utilise un objet Date pour obtenir l'heure actuelle et l'heure cible, calculer la différence et l'afficher sur la page HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CountDown Timer</title>
</head>
<body>
<div id="countdown"></div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="countdown"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>- Carrousel d'images
JavaScript peut être utilisé pour créer un carrousel d'images, où un ensemble d'images apparaissent en rotation sur une page Web. Cet extrait de code utilise l'élément image dans la logique HTML et JavaScript pour stocker une liste d'images dans un tableau et mettre à jour l'image actuelle à un intervalle spécifié.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Slider</title>
</head>
<body>
<div id="slider">
<img id="sliderImg" src="">
</div>
<script>
var images = [
"img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"
];
var current = 0;
function changeImage(){
current++;
if(current >= images.length){
current = 0;
}
document.getElementById("sliderImg").src = images[current];
}
setInterval(changeImage, 3000);
</script>
</body>
</html>- Validation de formulaire
JavaScript peut être utilisé pour valider la saisie de l'utilisateur afin de garantir que le format et le contenu des données saisies sont corrects. Cet extrait de code utilise des éléments de formulaire HTML et une logique JavaScript pour valider les entrées de l'utilisateur en vérifiant chaque élément de formulaire.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var nameError = document.getElementById("nameError");
var emailError = document.getElementById("emailError");
var phoneError = document.getElementById("phoneError");
if(!name){
nameError.innerHTML = "Please enter your name.";
event.preventDefault();
}
if(!email){
emailError.innerHTML = "Please enter your email.";
event.preventDefault();
}
if(!phone){
phoneError.innerHTML = "Please enter your phone number.";
event.preventDefault();
}
});
</script>
</body>
</html>Résumé
Ceci sont des exemples de fonctions implémentées en JavaScript, couvrant des fonctions pratiques telles que les calculatrices, les comptes à rebours, les carrousels d'images et la validation de formulaires. Bien entendu, ce n’est que la pointe de l’iceberg des capacités des applications JavaScript. JavaScript a de nombreuses autres utilisations et scénarios d’application dans la conception et le développement Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
