用html的格式 JavaScript对象 1、利用日期对象,对不同的进站时间,显示不同的提示信息。比如,上午六点到下午六点,显示“将有限的时间用在作最有意义的事”;其他时间显示“现在是休息时间”。 2、检测用户输入的邮件格式是否正确。 3、用户进入时,显示“欢迎您进入本网站!”;离开时,显示“谢谢您,欢迎下次再来!
时间: 2024-01-24 16:17:22 浏览: 30
以下是用HTML和JavaScript实现上述功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
<script>
window.onload = function() {
var welcomeMsg = "欢迎您进入本网站!";
var goodbyeMsg = "谢谢您,欢迎下次再来!";
var timeMsg = "将有限的时间用在作最有意义的事";
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
if (hour >= 6 && hour < 18) {
timeMsg = "将有限的时间用在作最有意义的事";
} else {
timeMsg = "现在是休息时间";
}
document.getElementById("welcome").innerHTML = welcomeMsg;
document.getElementById("goodbye").innerHTML = goodbyeMsg;
document.getElementById("time").innerHTML = timeMsg;
document.getElementById("submit").onclick = function() {
var email = document.getElementById("email").value;
var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (pattern.test(email)) {
alert("邮箱格式正确");
} else {
alert("邮箱格式不正确");
}
}
}
window.onbeforeunload = function() {
return "确定离开本网站吗?";
}
</script>
</head>
<body>
<div id="welcome"></div>
<div id="time"></div>
<input type="text" id="email"><button id="submit">检测邮箱格式</button>
<div id="goodbye"></div>
</body>
</html>
```
上述代码实现了三个功能:
1. 根据当前时间显示不同的提示信息。
2. 检测用户输入的邮件格式是否正确。
3. 用户进入和离开时显示相应的提示信息。
其中,`window.onload`事件在页面加载完成后触发,用于初始化页面内容。`window.onbeforeunload`事件在用户离开页面时触发,用于提示用户是否确定离开。`getElementById`方法用于获取页面上的元素,并且可以修改其内容或绑定事件。`Date`对象用于获取当前时间,`getHours`和`getMinutes`方法用于获取小时和分钟数。正则表达式用于检测邮箱格式是否正确。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)