ホームページ > 記事 > ウェブフロントエンド > JavaScriptで実装された機能例は何ですか?
JavaScriptで実装された機能例は何ですか?
- PHPzオリジナル
- 2023-04-21 14:16:22603ブラウズ
JavaScript は、Web ページのインタラクティブ性の設計と開発で広く使用されている、一般的に使用されるスクリプト言語です。今回はJavaScriptで実装した実用的な関数例をいくつか紹介します。
- 単純な計算機
JavaScript を使用して、単純な計算機を作成できます。このコード スニペットでは、HTML のボタンと入力ボックス、および JavaScript を使用して計算ロジックを処理します。ユーザーは数値、演算子、オペランドを入力し、等号をクリックして計算を実行し、結果を表示します。
<!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 を使用して、指定した日時から特定の目標時刻までカウントダウンするカウントダウン タイマーを作成できます。このコード スニペットは、Date オブジェクトを使用して現在時刻と目標時刻を取得し、その差を計算して、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 を使用して、画像のグループが Web ページ上で回転して表示される画像カルーセルを作成できます。このコード スニペットは、HTML および JavaScript ロジックの image 要素を使用して、画像のリストを配列に保存し、指定された間隔で現在の画像を更新します。
<!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 を使用してユーザー入力を検証し、入力データの形式と内容が正しいことを確認できます。このコード スニペットは、HTML フォーム要素と JavaScript ロジックを使用して、各フォーム要素をチェックすることでユーザー入力を検証します。
<!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>
概要
これらは JavaScript で実装された機能例で、電卓、カウントダウン タイマー、画像カルーセル、フォーム検証などの実用的な機能をカバーしています。もちろん、これは JavaScript アプリケーション機能の氷山の一角にすぎず、JavaScript には Web デザインや開発において他にも多くの用途やアプリケーション シナリオがあります。
以上がJavaScriptで実装された機能例は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。