当输入当前时间值为6~12时,页面显示“上午好!欢迎来到贵美”,输入几点显示几个笑脸图标
时间: 2024-09-14 11:03:10 浏览: 8
你可以使用JavaScript结合HTML和CSS来实现这个功能。下面是一个简单的例子:
HTML部分(创建一个用于显示结果的元素):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Greetings</title>
</head>
<body>
<h1 id="greeting"></h1>
<!-- 这里可以添加一个笑脸图标 -->
<span id="smiley-count"></span>
</body>
</html>
```
JavaScript部分(设置时间判断和显示逻辑):
```javascript
// 获取当前时间
const now = new Date();
// 获取小时数
const hours = now.getHours();
// 获取显示结果的元素
const greetingElement = document.getElementById('greeting');
const smileyCountElement = document.getElementById('smiley-count');
if (hours >= 6 && hours <= 12) {
// 如果时间在6点到12点之间
greetingElement.textContent = '上午好!欢迎来到贵美';
// 根据当前小时数设置笑脸图标数量
smileyCountElement.textContent = '笑脸数量:' + (hours - 6);
} else {
greetingElement.textContent = '现在不是上午时间';
smileyCountElement.textContent = '';
}
```
这段代码会根据当前时间显示不同的问候语,并在上午时段根据具体小时数显示相应的笑脸图标数量。请注意,笑脸图标的实现需要CSS样式来定义笑脸的样子,并通过JavaScript动态更改内容。