Rumah > Artikel > hujung hadapan web > Apakah contoh berfungsi yang dilaksanakan oleh javascript?
Apakah contoh berfungsi yang dilaksanakan oleh javascript?
- PHPzasal
- 2023-04-21 14:16:22663semak imbas
JavaScript ialah bahasa skrip yang biasa digunakan yang digunakan secara meluas dalam reka bentuk dan pembangunan interaktiviti halaman web. Hari ini, kami akan memperkenalkan beberapa contoh fungsi praktikal yang dilaksanakan dalam JavaScript.
- Kalkulator Mudah
JavaScript boleh digunakan untuk mencipta kalkulator ringkas. Coretan kod ini menggunakan butang dan kotak input dalam HTML dan JavaScript untuk mengendalikan logik kalkulator. Pengguna memasukkan nombor, operator dan operan, kemudian mengklik tanda sama untuk menjalankan pengiraan dan memaparkan hasilnya.
<!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>
- Pemasa Kira detik
JavaScript boleh digunakan untuk mencipta pemasa kira detik yang mengira detik dari tarikh dan masa yang ditetapkan sehingga masa sasaran tertentu. Coretan kod ini menggunakan objek Tarikh untuk mendapatkan masa semasa dan masa sasaran, mengira perbezaan dan memaparkannya pada halaman 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>
- Karusel Imej
JavaScript boleh digunakan untuk mencipta karusel imej, di mana satu set imej muncul secara bergilir pada halaman web. Coretan kod ini menggunakan elemen imej dalam HTML dan logik JavaScript untuk menyimpan senarai imej dalam tatasusunan dan mengemas kini imej semasa pada selang waktu tertentu.
<!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>
- Pengesahan Borang
JavaScript boleh digunakan untuk mengesahkan input pengguna bagi memastikan format dan kandungan data input adalah betul. Coretan kod ini menggunakan elemen borang HTML dan logik JavaScript untuk mengesahkan input pengguna dengan menyemak setiap elemen borang.
<!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>
Ringkasan
Ini ialah contoh fungsi yang dilaksanakan dalam JavaScript, meliputi fungsi praktikal seperti kalkulator, pemasa undur, karusel imej dan pengesahan borang. Sudah tentu, ini hanyalah sebahagian besar daripada keupayaan aplikasi JavaScript JavaScript mempunyai banyak kegunaan lain dan senario aplikasi dalam reka bentuk dan pembangunan web.
Atas ialah kandungan terperinci Apakah contoh berfungsi yang dilaksanakan oleh javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!