编写一个网页程序,获取用户输入的狗的年龄(整数),通过程序显示其相当于人类的年龄。如果用户输入负数,请显示一个提示信息。 例子: 输入:5 输出: 5岁的狗相当于人的33岁 输入:-3 输出: 狗子还有3年才出生!!!
时间: 2024-10-17 19:08:53 浏览: 19
第2章-Excrices13:Java :(算术)编写一个应用程序,要求用户输入两个整数
为了编写一个简单的网页程序,我们可以使用HTML、CSS和JavaScript结合。这里是一个基础的HTML和JavaScript实现的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狗狗年龄转换器</title>
<style>
.error-message {
color: red;
}
</style>
</head>
<body>
<h1>狗狗年龄到人类年龄转换器</h1>
<form id="dog-age-form">
<label for="dog-age-input">请输入狗狗的年龄:</label>
<input type="number" id="dog-age-input" required>
<button type="submit">计算</button>
</form>
<div id="result" class="hidden"></div>
<script>
const form = document.getElementById('dog-age-form');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交
let dogAge = parseInt(document.getElementById('dog-age-input').value);
if (isNaN(dogAge) || dogAge < 0) { // 检查输入是否为有效数字且非负
resultDiv.textContent = '无效输入!请确保输入的是一个非负整数。';
resultDiv.classList.remove('hidden'); // 显示错误消息
} else {
let humanAge = calculateHumanAge(dogAge);
resultDiv.textContent = `狗狗${dogAge}岁相当于人的${humanAge}岁.`;
resultDiv.classList.add('hidden'); // 隐藏错误消息,显示结果
}
});
function calculateHumanAge(dogAge) {
const baseAge = Math.floor(dogAge / 2) * 10.5;
const extraYears = Math.ceil((dogAge % 2) / 2) * 4; // 根据剩余年限添加额外的四年
return baseAge + extraYears;
}
</script>
</body>
</html>
```
在这个程序中,用户在输入框中输入狗狗年龄后点击“计算”,JavaScript会检查输入的有效性,并根据提供的公式计算人类年龄。如果输入是负数或非数字,就会在页面上显示一条错误信息。如果输入有效,就会显示相应的转换结果。
阅读全文