javascript로 구현된 기능적 예제는 무엇입니까?
- PHPz원래의
- 2023-04-21 14:16:22663검색
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를 사용하면 이미지 집합이 웹페이지에 회전하여 표시되는 이미지 캐러셀을 만들 수 있습니다. 이 코드 조각은 HTML 및 JavaScript 논리의 이미지 요소를 사용하여 배열에 이미지 목록을 저장하고 지정된 간격으로 현재 이미지를 업데이트합니다.
<!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>
Summary
다음은 계산기, 카운트다운 타이머, 이미지 캐러셀, 양식 유효성 검사와 같은 실용적인 기능을 다루는 JavaScript로 구현된 기능의 예입니다. 물론 이것은 JavaScript 애플리케이션 기능의 빙산의 일각에 불과합니다. JavaScript에는 웹 디자인 및 개발 분야에서 다른 많은 용도와 애플리케이션 시나리오가 있습니다.
위 내용은 javascript로 구현된 기능적 예제는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML 이스케이프는 무엇을 의미합니까?다음 기사：HTML 이스케이프는 무엇을 의미합니까?