Random Number Generator Game: HTML & JavaScript
<html>
<head>
<title>Random Number Generator Game: HTML & JavaScript</title>
<style>
.container {
width: 600px;
margin: 0 auto;
}
<pre><code> .game-container {
border: 1px solid black;
width: 400px;
padding: 20px;
margin: 0 auto;
}
.game-button {
background-color: #000000;
color: #ffffff;
padding: 10px;
font-size: 24px;
border-radius: 5px;
}
.game-button:hover {
background-color: #ff0000;
}
</style>
</code></pre>
</head>
<body>
<div class='container'>
<h1>Random Number Generator Game</h1>
<div class='game-container'>
<p>Click the button below to generate a random number between 1 and 10.</p>
<button class='game-button' id='random-btn'>Random Number</button>
<p id='result'></p>
</div>
</div>
<pre><code><script type='text/javascript'>
const btn = document.querySelector('#random-btn');
const result = document.querySelector('#result');
btn.addEventListener('click', () => {
let randomNumber = Math.floor((Math.random() * 10) + 1);
result.textContent = 'You got ' + randomNumber;
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmsm 著作权归作者所有。请勿转载和采集!