编写一个 HTIL 页面,包含一个按钮。当用户点击按钮时,使用 JavaScript 获取当前日期和时间,并在页面上显示。
时间: 2024-03-15 19:45:10 浏览: 148
可以用以下代码来实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>获取当前日期和时间</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="showDateTime()">点击获取当前日期和时间</button>
<p id="datetime"></p>
<script>
function showDateTime() {
var now = new Date();
var datetime = document.getElementById("datetime");
datetime.innerHTML = "当前日期和时间是:" + now.toLocaleString();
}
</script>
</body>
</html>
```
这里使用了一个按钮和一个 `<p>` 标签来展示日期和时间。在按钮的 `onclick` 事件中,使用 `new Date()` 获取当前日期和时间,并将其赋值给一个变量 `now`。然后,使用 `document.getElementById()` 获取页面中的 `<p>` 标签,并将日期和时间添加到其中。最后,使用 `toLocaleString()` 方法将日期和时间转换为本地时间格式。
相关问题
请编写一个HTIL和CSS代码,创建一个简单的登录表单。该表单应包含用户名和密码字段,以及一个提交按钮。设计一个CSS样式,使表单具有美观的外观,且CSS文件需要通过外部样式在HTIL代码中引入要求:1)表单: 宽度为300像素; 外边距:默认0,和浏览器计算外边距;用户名和密码: 2) 输入框宽度为100像素:内边距设置为5像素;下外边距设置10像素;3)提交按钮 背景颜色为:灰色;字体颜色为白色; 内边距设置为:上内边和下内边距是10px、右内边距和左内边距是20px;设置边框为:1pxsolid black; 鼠标移动到按钮上以后,按钮颜色变红色
HTML代码:
```
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
```
CSS代码:
```
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 100px;
padding: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: grey;
color: white;
padding: 10px 20px;
border: 1px solid black;
}
input[type="submit"]:hover {
background-color: red;
}
```
注释:以上代码在 CSS 文件中定义样式,然后在 HTML 文件中引用 CSS 文件。
阅读全文