在Java script中创建一个页面,并且添加js代码,要求: 显示当前时间 猜数游戏,计算机准备0-100之间的随机整数,用户来猜,统计用户猜数的次数
时间: 2024-09-28 17:13:07 浏览: 28
在JavaScript中创建一个简单的网页并包含一些JS代码,你可以按照以下步骤操作:
1. 首先,创建一个HTML文件(例如`index.html`),内容如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 猜数字游戏</title>
</head>
<body>
<h1>欢迎来到猜数字游戏!</h1>
<p id="timeDisplay">加载中...</p>
<p>请输入您猜测的数字(0-100):</p>
<input type="number" id="guessInput" min="0" max="100">
<button onclick="startGuess()">开始猜</button>
<p id="guessCount">猜数次数: 0</p>
<script src="script.js"></script>
</body>
</html>
```
2. 创建一个名为`script.js`的外部JavaScript文件,用于编写逻辑代码:
```javascript
document.addEventListener("DOMContentLoaded", function() {
// 显示当前时间
let timeDisplay = document.getElementById('timeDisplay');
function showCurrentTime() {
let now = new Date();
timeDisplay.textContent = `当前时间: ${now.toLocaleTimeString()}`;
}
showCurrentTime(); // 初始化显示当前时间
setInterval(showCurrentTime, 1000); // 每秒更新一次时间
// 猜数游戏
let guessCount = document.getElementById('guessCount');
let randomNumber = Math.floor(Math.random() * 101); // 随机生成0-100的整数
let userGuess;
function startGuess() {
guessCount.textContent = `猜数次数: ${guessCount.innerText.split(' ')[1] + 1}`;
userGuess = parseInt(document.getElementById('guessInput').value);
if (userGuess === randomNumber) {
alert('恭喜,猜对了!');
} else if (userGuess < randomNumber) {
alert('太高了,请再试一次!');
} else {
alert('太低了,请再试一次!');
}
}
});
```
现在,当页面加载完成时,它会显示当前时间并且允许用户输入猜测的数字。每次点击“开始猜”按钮,都会更新猜测次数并根据用户输入给出相应的提示。