创建一个有趣的网页可以使用HTML、CSS和JavaScript。下面是一个简单的示例代码,展示了一个有趣的网页,包含一个按钮,点击后会改变背景颜色和显示一条有趣的消息。

html
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
transition: background-color 0.5s;
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#message {
margin-top: 20px;
font-size: 24px;
color: #333;
opacity: 0;
transition: opacity 0.5s;
}
const button = document.getElementById('funButton');
const message = document.getElementById('message');
button.addEventListener('click', () => {
// 改变背景颜色
document.body.style.backgroundColor =
'#' + Math.floor(Math.random()*16777215).toString(16);
// 显示有趣的消息
message.style.opacity = 1;
});
代码解析:
- HTML部分: 创建了一个按钮和一个消息区域。
- CSS部分: 设置了页面的布局、按钮的样式以及消息的初始状态。
- JavaScript部分: 添加了按钮的点击事件,随机改变背景颜色并显示一条消息。
使用方法:
1. 将代码复制到一个新的文件中,命名为`index.html`。
2. 使用网页浏览器打开这个文件。
点击按钮后,你会看到背景颜色会随机变化,并且显示一条消息。希望你觉得这个网页有趣!

查看详情

查看详情