html代码实现一个网页,有留言板能实时显示留言,有时间戳,有小游戏,有导航栏...
时间: 2023-12-03 16:47:47 浏览: 65
以下是一个简单的HTML代码实现网页的例子,包含留言板、时间戳、小游戏和导航栏:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<meta charset="UTF-8">
<style>
/* CSS样式表 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #eee;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
nav a:hover {
background-color: #333;
color: #fff;
}
section {
padding: 10px;
}
aside {
background-color: #eee;
padding: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
#game {
display: none;
background-color: #fff;
padding: 20px;
text-align: center;
}
</style>
<script>
// JavaScript代码
function showGame() {
document.getElementById("game").style.display = "block";
}
</script>
</head>
<body>
<header>
<h1>My Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" onclick="showGame()">Play Game</a></li>
</ul>
</nav>
<section>
<h2>Welcome to my webpage!</h2>
<p>This is a simple example of an HTML webpage.</p>
<h3>Leave a message:</h3>
<form>
<input type="text" name="message" placeholder="Type your message here...">
<input type="submit" value="Submit">
</form>
<div id="messages">
<p><strong>John:</strong> Hi everyone!</p>
<p><strong>Mary:</strong> Hello John!</p>
<p><strong>David:</strong> How are you guys doing?</p>
<p><strong>John:</strong> I'm good, thanks for asking.</p>
<p><strong>Mary:</strong> Me too!</p>
<p><strong>David:</strong> Great to hear!</p>
</div>
</section>
<aside>
<h3>Current time:</h3>
<p><strong id="time"></strong></p>
<script>
// 显示当前时间
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds;
}, 1000);
</script>
</aside>
<div id="game">
<h3>Play a game:</h3>
<p>Here's a simple game you can play:</p>
<button onclick="alert('You win!')">Click me!</button>
</div>
<footer>
<p>© 2021 My Webpage</p>
</footer>
</body>
</html>
```
这个网页包含了以下功能:
- 导航栏:在顶部的导航栏中,用户可以点击链接访问不同的页面。
- 内容区域:在主要的内容区域中,用户可以留言,并且可以查看其他人留下的消息。这些消息会实时显示,因为它们是使用HTML和JavaScript动态生成的。
- 时间戳:在侧边栏中,用户可以看到当前的时间。这个时间是用JavaScript动态生成的,并且会每秒钟更新一次。
- 小游戏:在导航栏中,用户可以点击“Play Game”按钮来玩一个小游戏。这个游戏是一个简单的按钮点击游戏,当用户点击按钮时,会弹出一个消息框告诉用户他们赢了。
- 版权声明:在页面底部,有一个版权声明。
当你将这个代码保存为一个HTML文件并打开它时,你应该能够看到一个完整的网页,其中包含所有这些功能。注意,这只是一个简单的例子,你可以通过修改CSS和JavaScript代码来自定义网页的外观和行为。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)