Home > Article > Web Front-end > What are the functional examples implemented by javascript?
What are the functional examples implemented by javascript?
- PHPzOriginal
- 2023-04-21 14:16:22603browse
JavaScript is a commonly used scripting language that is widely used in web page interactivity design and development. Today, we will introduce some practical functional examples implemented in JavaScript.
- Simple Calculator
JavaScript can be used to create simple calculators. This code snippet uses buttons and input boxes in HTML, and JavaScript to handle the calculator logic. The user enters numbers, operators, and operands, then clicks the equals sign to run the calculation and display the result.
<!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 can be used to create a countdown timer that counts down from a specified date and time until a specific target time. This code snippet uses a Date object to get the current time and target time, calculate the difference, and display it on the HTML page.
<!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>
- Image Carousel
JavaScript can be used to create an image carousel, where a group of images appear in rotation on a web page. This code snippet uses the image element in HTML and JavaScript logic to store a list of images in an array and update the current image at a specified interval.
<!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>
- Form Validation
JavaScript can be used to validate user input to ensure that the format and content of the input data are correct. This code snippet uses HTML form elements and JavaScript logic to validate user input by checking each form element.
<!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>
Summary
These are functional examples implemented in JavaScript, covering practical functions such as calculators, countdown timers, image carousels, and form validation. Of course, this is just the tip of the iceberg of JavaScript application capabilities. JavaScript has many other uses and application scenarios in web design and development.
The above is the detailed content of What are the functional examples implemented by javascript?. For more information, please follow other related articles on the PHP Chinese website!