HTML Random Number Guessing Game: Play Now!
<!DOCTYPE html>
<html>
<head>
<title>Random Number Guessing Game</title>
<style>
body {
background-color: #2b2b2b;
font-family: sans-serif;
color: white;
text-align: center;
}
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
}
button {
background-color: #ffc107;
border: none;
padding: 10px;
border-radius: 8px;
font-size: 1.3em;
cursor: pointer;
}
.message {
padding: 10px 0;
font-size: 1.3em;
}
</style>
<script>
window.onload = function(){
//set a random number
let randomNumber = Math.floor(Math.random() * 10);
<pre><code> //get the button and input
let guessButton = document.querySelector('#guessButton');
let guessInput = document.querySelector('#guessInput');
//add an event listener to the button
guessButton.addEventListener('click', function(){
//get the value of the input
let userGuess = parseInt(guessInput.value);
//compare the value of the input to the random number
if(userGuess === randomNumber){
//if they match, display a message
document.querySelector('.message').innerHTML = 'You guessed it! The number was ' + randomNumber + '!';
} else {
//if they don't match, display a different message
document.querySelector('.message').innerHTML = 'Sorry, that's not the number. Try again!';
}
});
}
</script>
</head>
<body>
<div class='container'>
<h1>Random Number Guessing Game</h1>
<p>I'm thinking of a random number between 1 and 10. Can you guess what it is?</p>
<input type='text' id='guessInput'>
<button id='guessButton'>Guess</button>
<p class='message'></p>
</div>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/lmsr 著作权归作者所有。请勿转载和采集!