time, index style

hatrd · Apr 13, 2024 · cff0c66 · cff0c66
1 parent 8a5ab2e
commit cff0c66
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,11 @@
   <style>
     body {
       margin: 0 auto;
+      align-items: center;
+      justify-content: space-around;
+      display: flex;
+      flex-wrap: wrap;
+
     }
     h1 {
         margin: 0;
@@ -19,15 +24,17 @@
       border-radius: 2vw;
       margin-top: 1vw;
       margin-bottom: 1vw;
-      margin-left: 20%;
-      margin-right: 20%;
-      padding-top: 1vw;
-      padding-bottom: 1vw;
-
+      margin-left: 1vw;
+      margin-right: 1vw;
+      width: 200px;
+      height: 100px;
       cursor: pointer;
       text-align: center;
       align-items: center;
       transition: transform 0.5s ease, background-color 0.5s ease;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
     }
     .tool-box:hover {
       background: linear-gradient(45deg, #66ccff, #39C5BB );
@@ -65,6 +72,10 @@ <h1>pangu</h1>
     <h1>oneline</h1>
     <p>去除换行符</p>
   </div>
+  <div class="tool-box" onclick="window.location.href='time/index.html'">
+    <h1>time</h1>
+    <p>时间戳转换</p>
+  </div>
   <div class="tool-box" onclick="window.location.href='svg/index.html'">
     <h1>svg</h1>
     <p>实时展示 svg 效果</p>

diff --git a/time/index.html b/time/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>时间戳转换</title>
+</head>
+<body>
+
+<h2>输入 UNIX 时间戳:</h2>
+
+<input type="text" id="timestamp" placeholder="Enter timestamp here..">
+
+<button onclick="convertTimestamp()">Convert to Date</button>
+
+<p id="resultTimestamp"></p>
+
+<h2>输入日期和时间 (格式: yyyy-mm-dd hh:mm:ss):</h2>
+
+<input type="text" id="datetime" placeholder="Enter date and time here..">
+
+<button onclick="convertDatetime()">Convert to Timestamp</button>
+
+<p id="resultDatetime"></p>
+
+<script>
+    function convertTimestamp() {
+        // Get the value from the input field
+        var timestamp = document.getElementById('timestamp').value;
+
+        // Convert the UNIX timestamp to a date object
+        var date = new Date(timestamp * 1000);
+
+        // Format the date and time
+        var year = date.getFullYear();
+        var month = '0' + (date.getMonth() + 1);
+        var day = '0' + date.getDate();
+        var hours = '0' + date.getHours();
+        var minutes = '0' + date.getMinutes();
+        var seconds = '0' + date.getSeconds();
+
+        // Display the result
+        document.getElementById('resultTimestamp').innerHTML = '日期和时间: ' + year + '-' + month.substr(-2) + '-' + day.substr(-2) + ' ' + hours.substr(-2) + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    }
+
+    function convertDatetime() {
+        // Get the value from the input field
+        var datetime = document.getElementById('datetime').value;
+
+        // Convert the datetime string to a date object
+        var date = new Date(datetime);
+
+        // Convert the date object to a UNIX timestamp
+        var timestamp = Math.floor(date.getTime() / 1000);
+
+        // Display the result
+        document.getElementById('resultDatetime').innerHTML = 'UNIX 时间戳: ' + timestamp;
+    }
+</script>
+
+</body>
+</html>