Simple Guessing Game: HTML, No Instructions Needed
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<style>
body {
background-color: white;
font-family: sans-serif;
}
#game {
background-color: #F3F3F3;
padding: 10px;
width: 300px;
margin: 0 auto;
}
#guess {
font-size: 20px;
font-weight: bold;
}
#message {
font-size: 15px;
font-weight: bold;
}
#btn {
background-color: #1E90FF;
border: none;
padding: 10px;
color: white;
font-size: 16px;
margin-top: 10px;
}
#btn:hover {
background-color: #00BFFF;
cursor: pointer;
}
</style>
</head>
<body>
<div id='game'>
<h2>Guessing Game</h2>
<p>Guess a number between 1 and 10</p>
<input type='text' id='guess'>
<br>
<span id='message'></span>
<br>
<button id='btn'>Guess</button>
</div>
<script>
// Generate a random number between 1 and 10
const randomNumber = Math.floor(Math.random() * 10) + 1;
const btn = document.getElementById('btn');
const message = document.getElementById('message');
<pre><code>btn.addEventListener('click', function() {
// Get guessed value from input
const guess = document.getElementById('guess').value;
// Check if guessed number is correct
if (parseInt(guess) === randomNumber) {
message.innerHTML = 'Congratulations! You guessed the number!';
btn.disabled = true;
} else {
message.innerHTML = 'Sorry, try again.';
}
});
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lniP 著作权归作者所有。请勿转载和采集!