设计一个页面,在上面实时显示当前时间,在下面输入喜欢的明星,可以在一个无序列表中动态添加列表项
时间: 2024-03-26 15:34:41 浏览: 15
好的,我可以为您设计这个页面。首先需要使用HTML和CSS创建一个页面框架,然后使用JavaScript来实现时间和列表的动态更新。
以下是HTML和CSS的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时时间和明星列表</title>
<style>
body {
font-family: sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
ul {
margin-top: 50px;
list-style: none;
padding: 0;
}
li {
margin-top: 10px;
}
input[type="text"] {
padding: 5px;
font-size: 16px;
width: 200px;
}
</style>
</head>
<body>
<h1>实时时间和明星列表</h1>
<p>当前时间:<span id="clock"></span></p>
<input type="text" id="starName" placeholder="请输入明星姓名">
<button type="button" onclick="addStar()">添加</button>
<ul id="starList"></ul>
<script src="script.js"></script>
</body>
</html>
```
在这个页面中,我们使用了一个标题、一个段落元素来展示当前时间,一个文本输入框和一个按钮用来添加明星,以及一个无序列表用来显示已添加的明星。
下一步是使用JavaScript来实现时间的动态更新和列表项的添加。请看下面的代码:
```javascript
function addStar() {
var starName = document.getElementById("starName").value;
var starList = document.getElementById("starList");
var li = document.createElement("li");
li.textContent = starName;
starList.appendChild(li);
}
function updateTime() {
var clock = document.getElementById("clock");
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeString = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds);
clock.textContent = timeString;
}
function zeroPad(num) {
return (num < 10 ? "0" : "") + num;
}
setInterval(updateTime, 1000);
```
在这段代码中,我们定义了三个函数:`addStar()`、`updateTime()`和`zeroPad()`。`addStar()`函数获取文本输入框中的值,创建一个新的列表项,并将其添加到无序列表中。`updateTime()`函数获取当前时间,并将其格式化为一个字符串,然后将其写入到页面中。`zeroPad()`函数用于在小时、分钟和秒钟数小于10时在前面添加一个零。
最后,我们使用`setInterval()`函数来每秒钟调用一次`updateTime()`函数,从而实现时间的动态更新。
这就是实现实时时间和动态列表的页面的完整代码。希望能对您有所帮助!