利用ChatGPT不到10分钟生成一个网页工具
作为一个程序员，经常需要用到一些在线网页工具，例如时间戳转换，json格式转换。一直想做这类的工具，但苦于自己对网页开发不熟悉。
想到了ChatGPT，开始试试神奇生成代码之旅。
问ChatGPT:
设计一个在线时间戳的页面
ChatGPT答:
可以使用HTML、CSS和JavaScript编写一个简单的在线时间戳页面，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Online Timestamp</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 250px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 100px;
}
</style>
</head>
<body>
<h1>Online Timestamp</h1>
<input type="text" id="timestamp" placeholder="Enter timestamp">
<button onclick="convertTimestamp()">Convert</button>
<p id="result"></p>
<script>
function convertTimestamp() {
var timestamp = document.getElementById("timestamp").value;
var date = new Date(timestamp * 1000);
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var hours = ("0" + date.getHours()).slice(-2);
var minutes = ("0" + date.getMinutes()).slice(-2);
var seconds = ("0" + date.getSeconds()).slice(-2);
var formattedDate = day + "/" + month + "/" + year;
var formattedTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("result").innerHTML = formattedDate + " " + formattedTime;
}
</script>
</body>
</html>
该页面包括一个标题、一个输入框和一个按钮。用户可以在输入框中输入UNIX时间戳（自1970年1月1日以来的秒数），然后单击按钮将其转换为日期和时间，并将结果显示在页面上。JavaScript代码使用Date对象将时间戳转换为日期和时间，并格式化输出。HTML和CSS代码则用于构建页面布局和样式。
觉得功能太简单，又对ChatGPT下达命令：
追问ChatGPT:
再加一个功能，需要把输入标准时间，例如2023-03-30 14:00:00的时间转换成时间戳
ChatGPT答:
可以在现有的时间戳转换页面上添加一个额外的输入框和按钮，以便用户可以将标准时间转换为时间戳。以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
<title>Online Timestamp</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 250px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 100px;
}
</style>
</head>
<body>
<h1>Online Timestamp</h1>
<input type="text" id="timestamp" placeholder="Enter timestamp">
<button onclick="convertTimestamp()">Convert to Date and Time</button>
<p id="result"></p>
<input type="datetime-local" id="datetime" placeholder="Enter date and time">
<button onclick="convertDateTime()">Convert to Timestamp</button>
<p id="result2"></p>
<script>
function convertTimestamp() {
var timestamp = document.getElementById("timestamp").value;
var date = new Date(timestamp * 1000);
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var hours = ("0" + date.getHours()).slice(-2);
var minutes = ("0" + date.getMinutes()).slice(-2);
var seconds = ("0" + date.getSeconds()).slice(-2);
var formattedDate = day + "/" + month + "/" + year;
var formattedTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("result").innerHTML = formattedDate + " " + formattedTime;
}
function convertDateTime() {
var datetime = document.getElementById("datetime").value;
var date = new Date(datetime);
var timestamp = Math.round(date.getTime() / 1000);
document.getElementById("result2").innerHTML = timestamp;
}
</script>
</body>
</html>
还是觉得美中不足，又对ChatGPT下达命令：
追问ChatGPT:增加一个功能，显示当前东八区的时间
ChatGPT答:
可以使用JavaScript获取当前的日期和时间，并将其转换为东八区的时间。以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
<title>Online Timestamp</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 250px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
width: 100px;
}
</style>
</head>
<body>
<h1>Online Timestamp</h1>
<input type="text" id="timestamp" placeholder="Enter timestamp">
<button onclick="convertTimestamp()">Convert to Date and Time</button>
<p id="result"></p>
<input type="datetime-local" id="datetime" placeholder="Enter date and time">
<button onclick="convertDateTime()">Convert to Timestamp</button>
<p id="result2"></p>
<h2>Current Time in GMT+8:</h2>
<p id="current-time"></p>
<script>
function convertTimestamp() {
var timestamp = document.getElementById("timestamp").value;
var date = new Date(timestamp * 1000);
var year = date.getFullYear();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var hours = ("0" + date.getHours()).slice(-2);
var minutes = ("0" + date.getMinutes()).slice(-2);
var seconds = ("0" + date.getSeconds()).slice(-2);
var formattedDate = day + "/" + month + "/" + year;
var formattedTime = hours + ":" + minutes + ":" + seconds;
document.getElementById("result").innerHTML = formattedDate + " " + formattedTime;
}
function convertDateTime() {
var datetime = document.getElementById("datetime").value;
var date = new Date(datetime);
var timestamp = Math.round(date.getTime() / 1000);
document.getElementById("result2").innerHTML = timestamp;
}
function getCurrentTime() {
var now = new Date();
var utcOffset = now.getTimezoneOffset();
var gmt8Offset = -480; // GMT+8 offset in minutes
var localOffset = utcOffset - gmt8Offset;
now.setMinutes(now.getMinutes() + localOffset);
return now;
}
var currentTime = getCurrentTime();
var year = currentTime.getFullYear();
var month = ("0" + (currentTime.getMonth() + 1)).slice(-2);
var day = ("0" + currentTime.getDate()).slice(-2);
var hours = ("0" + currentTime.getHours()).slice(-2);
var minutes = ("0" + currentTime.getMinutes()).slice(-2);
var seconds = ("0" + currentTime.getSeconds()).slice(-2);
var formattedTime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById("current-time").innerHTML = formattedTime;
setInterval(function() {
currentTime = getCurrentTime();
year = currentTime.getFullYear();
month = ("0" + (currentTime.getMonth() + 1)).slice(-2);
day = ("0" + currentTime.getDate()).slice(-2);
hours = ("0" + currentTime.getHours()).slice(-2);
minutes = ("0" + currentTime.getMinutes()).slice(-2);
seconds = ("0" + currentTime.getSeconds()).slice(-2);
formattedTime = day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById("current-time").innerHTML = formattedTime;
}, 1000); // update time every second
</script>
</body>
</html>
最终生成工具如下：
借助ChatGPT，不到10分钟就基本初步达到自己想要的效果。如果自己看工具书编写，或者通过传统的搜索引擎，不顺利时可能要几个小时才做出来。
关注公众号“大模型全栈程序员”回复“小程序”获取1000个小程序打包源码。更多免费资源在http://www.gitweixin.com/?p=2627
