编写一个界面输入时间戳或者时间,自动返回时间或时间戳的html
时间: 2024-03-02 09:51:16 浏览: 122
你可以使用 HTML、CSS 和 JavaScript 制作这样一个界面。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间戳与时间互转</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
label {
font-size: 18px;
margin-bottom: 10px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
margin-bottom: 20px;
}
button {
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
p {
font-size: 18px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>时间戳与时间互转</h1>
<form>
<label>输入时间戳或时间:</label>
<input type="text" id="input">
<button type="button" onclick="convert()">转换</button>
</form>
<p id="output"></p>
<script>
function convert() {
const input = document.getElementById('input').value.trim();
const output = document.getElementById('output');
if (/^\d+$/.test(input)) { // 输入为时间戳
const timestamp = parseInt(input, 10);
const date = new Date(timestamp);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
const seconds = ('0' + date.getSeconds()).slice(-2);
const htmlTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
output.textContent = `转换结果:${htmlTime}`;
} else { // 输入为时间
const date = new Date(input);
if (isNaN(date)) {
output.textContent = '输入错误,请输入有效的时间戳或时间';
} else {
const timestamp = date.getTime();
output.textContent = `转换结果:${timestamp}`;
}
}
}
</script>
</body>
</html>
```
在此示例中,我们使用了一个表单,用户可以在表单中输入时间戳或者时间,然后点击“转换”按钮进行转换。转换结果将会在页面中显示出来。注意,这里我们使用了一个正则表达式来判断输入是否为时间戳。如果不是时间戳,则将其当做时间来处理。
阅读全文