![单页面网站](/sites/jamesqi.com/files/inline-images/single-page-website.jpg)
创建一个单页网站。
提示
用户
制作一个单页网站,展示不同的JavaScript特性,如下拉菜单和信息展示等。网站应该是一个嵌入了JavaScript和CSS的HTML文件。
样本响应
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 特性</title>
<style>
body {
font-family: Arial, sans-serif;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h1>JavaScript 特性</h1>
<div class="dropdown">
<button>鼠标悬停在我上面</button>
<div class="dropdown-content">
<p>你好,世界!</p>
</div>
</div><h2>JavaScript 警告</h2>
<button onclick="displayAlert()">点击我</button><h2>JavaScript 日期</h2>
<p id="date"></p><script>
function displayAlert() {
alert("你好,这是一个 JavaScript 警告!");
}document.getElementById("date").innerHTML = "今天的日期是 " + new Date().toDateString();
</script>
</body>
</html>
```
这是一个简单的单页网站,演示了几个JavaScript特性:1. 当你将鼠标悬停在按钮上时会出现一个下拉菜单。这是使用CSS实现的悬停效果和HTML实现的结构。
2. 当你点击按钮时会触发一个JavaScript警告。这是一个简单的演示,展示了JavaScript如何与HTML元素交互。
3. 一个显示当前日期的JavaScript函数。这是一个例子,展示了JavaScript如何操作HTML内容。
API 请求
{
"model": "gpt-4",
"messages": [
{
"role": "user",
"content": "Make a single page website that shows off different neat javascript features for drop-downs and things to display information. The website should be an HTML file with embedded javascript and CSS."
}
],
"temperature": 0,
"max_tokens": 2048
}
评论