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.
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>
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>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>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!
supprimer le dossier sous Linux
Introduction à la signification d'un mot de passe invalide
Présentation du serveur PHP
Comment utiliser la fonction norme en python
Solution au code Java qui ne fonctionne pas
lien du serveur émule
Tutoriel du portefeuille Eou web3
Quelle est la fonction du diviseur de fréquence
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
