<!DOCTYPE html>
<html>
<head>
<title>Display Animation and Form Example</title>
</head>
<body>
<div id="animation-container">
<!-- Put your animation HTML/CSS code here -->
<p>Loading animation...</p>
</div>
<div id="form-container" style="display: none;">
<!-- Put your form HTML code here -->
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<script src="script.js"></script>
</body>
</html>
<script>
// Select the animation and form containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
// Wait for 5 seconds before showing the form
setTimeout(() => {
// Hide the animation container
animationContainer.style.display = 'none';
// Show the form container
formContainer.style.display = 'block';
}, 5000);
</script>
สุ่มเวลาการแสดงผล อนิเมชั่น
// Select the animation and form containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
// Generate a random delay time between 20 and 40 seconds
const delayTime = Math.floor(Math.random() * (40000 - 20000 + 1)) + 20000;
// Wait for the random delay time before showing the form
setTimeout(() => {
// Hide the animation container
animationContainer.style.display = 'none';
// Show the form container
formContainer.style.display = 'block';
}, delayTime);
ให้แสดงผลเวลาด้วย
<!DOCTYPE html>
<html>
<head>
<title>Display Animation and Form Example</title>
</head>
<body>
<div id="animation-container">
<!-- Put your animation HTML/CSS code here -->
<p>Loading animation...</p>
</div>
<div id="form-container" style="display: none;">
<!-- Put your form HTML code here -->
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div id="timer-container">
<!-- Display the random delay time here -->
</div>
<script src="script.js"></script>
</body>
</html>
<script>
// Select the animation, form, and timer containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
const timerContainer = document.getElementById('timer-container');
// Generate a random delay time between 20 and 40 seconds
const delayTime = Math.floor(Math.random() * (40000 - 20000 + 1)) + 20000;
// Display the random delay time to the user
timerContainer.innerText = `The form will appear in ${delayTime/1000} seconds.`;
// Wait for the random delay time before showing the form
setTimeout(() => {
// Hide the animation container
animationContainer.style.display = 'none';
// Show the form container
formContainer.style.display = 'block';
}, delayTime);
</script>นับถอยหลังด้วย (มีบัค นับไม่จบสิ้น)
// Select the animation, form, and timer containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
const timerContainer = document.getElementById('timer-container');
// Generate a random delay time between 20 and 40 seconds
const delayTime = Math.floor(Math.random() * (40000 - 20000 + 1)) + 20000;
// Display the random delay time to the user
timerContainer.innerText = `The form will appear in ${delayTime/1000} seconds.`;
// Create a countdown timer
let countdown = delayTime / 1000;
let countdownInterval = setInterval(() => {
countdown--;
timerContainer.innerText = `The form will appear in ${countdown} seconds.`;
if (countdown == 0) {
clearInterval(countdownInterval);
timerContainer.style.display = 'none';
// Hide the animation container
animationContainer.style.display = 'none';
// Show the form container
formContainer.style.display = 'block';
}
}, 1000);
นับถอยหลังอีกแบบ (ใช้ได้แต่ไม่ใช่ที่ต้องการ เพราะไม่ได้เอาตัวเลขสุ่มมา
// Select the animation, form, and timer containers
const animationContainer = document.getElementById('animation-container');
const formContainer = document.getElementById('form-container');
const timerContainer = document.getElementById('timer-container');
const inputNumber = document.getElementById('input-number');
// Generate a random number between 1 and 10
const randomNumber = Math.floor(Math.random() * 10) + 1;
// Display the random number to the user
timerContainer.innerText = `Enter the number ${randomNumber}`;
// Create a countdown timer
let countdown = 10;
let countdownInterval = setInterval(() => {
countdown--;
timerContainer.innerText = `Enter the number ${randomNumber} (${countdown})`;
if (countdown == 0) {
clearInterval(countdownInterval);
timerContainer.style.display = 'none';
// Hide the animation container
animationContainer.style.display = 'none';
// Show the form container
formContainer.style.display = 'block';
}
}, 1000);
// Handle form submission
formContainer.addEventListener('submit', (e) => {
e.preventDefault();
const enteredNumber = parseInt(inputNumber.value);
if (enteredNumber === randomNumber) {
alert('Correct!');
} else {
alert('Incorrect!');
}
formContainer.reset();
// Reset the timer and display
countdown = 0;
timerContainer.style.display = 'none';
// Hide the form container
formContainer.style.display = 'none';
// Show the animation container
animationContainer.style.display = 'block';
setTimeout(() => {
location.reload();
}, 2000);
});