Creation chat
ClarkZhang
please create a timestamp converter for me
02-25 08:38
暂无回复
No comments yet
登录 后可以评论
Assistant
# Timestamp Converter
I'll create a responsive timestamp converter that converts between Unix timestamps and human-readable dates with timezone support.
(HTML code has been generated and updated; see above for the current version.)
## Features of this Timestamp Converter:
1. **Dual Conversion Modes**:
- Unix timestamp to human-readable date
- Human date to Unix timestamp
2. **Flexible Input Options**:
- Supports both seconds and milliseconds timestamp formats
- Timezone selection for accurate conversions
- Quick action buttons for common dates (Now, Today, Yesterday, Tomorrow)
3. **Responsive Design**:
- Works on mobile and desktop devices
- Clean, modern interface with clear sections
4. **Dark/Light Theme**:
- Toggle between themes with persistent storage
- Smooth transitions between color schemes
5. **Helpful Information**:
- Clear explanations of Unix timestamps
- Examples of both timestamp formats
- Detailed results showing multiple date formats
6. **User Experience Enhancements**:
- Real-time conversion as you type
- Clear error messages for invalid inputs
- Intuitive controls and layout
The converter automatically detects your system's preferred theme and saves your choice for future visits. You can easily switch between converting timestamps and human dates with the dual-panel interface.
▼ Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timestamp Converter</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200">
<!-- Theme toggle button -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){
var el=document.documentElement;
var isDark=!el.classList.contains('dark');
el.classList.toggle('dark',isDark);
localStorage.setItem('theme',isDark?'dark':'light');
applyTheme(isDark);
}
function applyTheme(isDark){
document.getElementById('icon-moon').style.display=isDark?'none':'block';
document.getElementById('icon-sun').style.display=isDark?'block':'none';
}
document.addEventListener('DOMContentLoaded',function(){
var saved=localStorage.getItem('theme');
var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark',isDark);
applyTheme(isDark);
});
</script>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<header class="text-center mb-12">
<h1 class="text-3xl md:text-4xl font-bold mb-2 text-slate-800 dark:text-slate-100">Timestamp Converter</h1>
<p class="text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
Convert between Unix timestamps and human-readable dates. Supports seconds and milliseconds formats.
</p>
</header>
<main>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-8 transition-all duration-300">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Unix to Human Converter -->
<div class="border border-slate-200 dark:border-slate-700 rounded-lg p-5 transition-colors duration-300">
<h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-100 flex items-center">
<i class="fas fa-clock mr-2 text-blue-600 dark:text-blue-400"></i>
Unix Timestamp to Human Date
</h2>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Enter Unix Timestamp
</label>
<div class="flex">
<input
type="number"
id="unix-input"
class="flex-1 rounded-l-lg border border-r-0 border-slate-300 dark:border-slate-600 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
placeholder="1609459200"
>
<select id="unix-format" class="rounded-r-lg border border-slate-300 dark:border-slate-600 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white">
<option value="seconds">Seconds</option>
<option value="milliseconds">Milliseconds</option>
</select>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Timezone
</label>
<select id="unix-timezone" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white">
<option value="local">Local Time</option>
<option value="utc">UTC</option>
<option value="America/New_York">America/New_York</option>
<option value="Europe/London">Europe/London</option>
<option value="Asia/Tokyo">Asia/Tokyo</option>
</select>
</div>
<button
id="convert-unix-btn"
class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
>
<i class="fas fa-sync-alt mr-2"></i>
Convert to Human Date
</button>
<div class="mt-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Result
</label>
<div id="unix-result" class="min-h-[60px] bg-slate-100 dark:bg-slate-700 rounded-lg p-3 text-slate-800 dark:text-slate-200 font-mono break-words">
Enter a timestamp to see the result
</div>
</div>
</div>
<!-- Human to Unix Converter -->
<div class="border border-slate-200 dark:border-slate-700 rounded-lg p-5 transition-colors duration-300">
<h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-100 flex items-center">
<i class="fas fa-calendar-alt mr-2 text-emerald-600 dark:text-emerald-400"></i>
Human Date to Unix Timestamp
</h2>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Select Date and Time
</label>
<input
type="datetime-local"
id="date-input"
class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:bg-slate-700 dark:text-white"
>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Timezone
</label>
<select id="date-timezone" class="w-full rounded-lg border border-slate-300 dark:border-slate-600 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:bg-slate-700 dark:text-white">
<option value="local">Local Time</option>
<option value="utc">UTC</option>
<option value="America/New_York">America/New_York</option>
<option value="Europe/London">Europe/London</option>
<option value="Asia/Tokyo">Asia/Tokyo</option>
</select>
</div>
<button
id="convert-date-btn"
class="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-medium py-2.5 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
>
<i class="fas fa-sync-alt mr-2"></i>
Convert to Unix Timestamp
</button>
<div class="mt-4">
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Result
</label>
<div id="date-result" class="min-h-[60px] bg-slate-100 dark:bg-slate-700 rounded-lg p-3 text-slate-800 dark:text-slate-200 font-mono break-words">
Select a date to see the result
</div>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700">
<h3 class="text-lg font-medium text-slate-800 dark:text-slate-100 mb-3">Quick Actions</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button id="now-btn" class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 py-2 px-3 rounded-lg transition-colors duration-300 text-sm">
<i class="fas fa-clock mr-1"></i> Now
</button>
<button id="today-btn" class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 py-2 px-3 rounded-lg transition-colors duration-300 text-sm">
<i class="fas fa-calendar-day mr-1"></i> Today
</button>
<button id="yesterday-btn" class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 py-2 px-3 rounded-lg transition-colors duration-300 text-sm">
<i class="fas fa-calendar-minus mr-1"></i> Yesterday
</button>
<button id="tomorrow-btn" class="bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 py-2 px-3 rounded-lg transition-colors duration-300 text-sm">
<i class="fas fa-calendar-plus mr-1"></i> Tomorrow
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-100">About Timestamps</h2>
<div class="prose prose-slate dark:prose-invert max-w-none">
<p>
A Unix timestamp represents the number of seconds (or milliseconds) that have elapsed since January 1, 1970 (UTC),
also known as the Unix epoch. It's widely used in computing systems for representing dates and times.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
<h3 class="font-medium text-blue-800 dark:text-blue-200 mb-2">Unix Timestamp (Seconds)</h3>
<p class="text-sm text-blue-700 dark:text-blue-300">
Standard Unix timestamp representing seconds since epoch. Example: <code class="bg-blue-100 dark:bg-blue-800/50 px-1 rounded">1609459200</code>
</p>
</div>
<div class="bg-emerald-50 dark:bg-emerald-900/20 p-4 rounded-lg">
<h3 class="font-medium text-emerald-800 dark:text-emerald-200 mb-2">Unix Timestamp (Milliseconds)</h3>
<p class="text-sm text-emerald-700 dark:text-emerald-300">
JavaScript-style timestamp representing milliseconds since epoch. Example: <code class="bg-emerald-100 dark:bg-emerald-800/50 px-1 rounded">1609459200000</code>
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="mt-12 text-center text-slate-600 dark:text-slate-400 text-sm">
<p>Timestamp Converter © 2023 | Works in all modern browsers</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const unixInput = document.getElementById('unix-input');
const unixFormat = document.getElementById('unix-format');
const unixTimezone = document.getElementById('unix-timezone');
const convertUnixBtn = document.getElementById('convert-unix-btn');
const unixResult = document.getElementById('unix-result');
const dateInput = document.getElementById('date-input');
const dateTimezone = document.getElementById('date-timezone');
const convertDateBtn = document.getElementById('convert-date-btn');
const dateResult = document.getElementById('date-result');
const nowBtn = document.getElementById('now-btn');
const todayBtn = document.getElementById('today-btn');
const yesterdayBtn = document.getElementById('yesterday-btn');
const tomorrowBtn = document.getElementById('tomorrow-btn');
// Set initial date input to current date and time
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
dateInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
// Convert Unix timestamp to human date
function convertUnixToHuman() {
const timestamp = unixInput.value.trim();
if (!timestamp) {
unixResult.textContent = 'Please enter a timestamp';
return;
}
let date;
const format = unixFormat.value;
const timezone = unixTimezone.value;
try {
if (format === 'seconds') {
date = new Date(parseInt(timestamp) * 1000);
} else {
date = new Date(parseInt(timestamp));
}
if (isNaN(date.getTime())) {
throw new Error('Invalid date');
}
let formattedDate;
if (timezone === 'local') {
formattedDate = date.toLocaleString();
} else if (timezone === 'utc') {
formattedDate = date.toUTCString();
} else {
// For other timezones, we'll use toLocaleString with timezone option
formattedDate = date.toLocaleString('en-US', {
timeZone: timezone
});
}
unixResult.innerHTML = `
<div class="mb-1"><strong>Date:</strong> ${formattedDate}</div>
<div class="text-xs text-slate-600 dark:text-slate-400">
<strong>UTC:</strong> ${date.toUTCString()}<br>
<strong>ISO:</strong> ${date.toISOString()}
</div>
`;
} catch (error) {
unixResult.textContent = 'Invalid timestamp';
}
}
// Convert human date to Unix timestamp
function convertHumanToUnix() {
const dateValue = dateInput.value;
if (!dateValue) {
dateResult.textContent = 'Please select a date';
return;
}
const timezone = dateTimezone.value;
let date;
try {
if (timezone === 'local') {
date = new Date(dateValue);
} else if (timezone === 'utc') {
// For UTC, we need to parse the date differently
const [datePart, timePart] = dateValue.split('T');
const [year, month, day] = datePart.split('-');
const [hours, minutes] = timePart.split(':');
date = new Date(Date.UTC(year, month - 1, day, hours, minutes));
} else {
// For other timezones, we'll use the timezone option
date = new Date(new Date(dateValue).toLocaleString('en-US', {
timeZone: timezone
}));
}
if (isNaN(date.getTime())) {
throw new Error('Invalid date');
}
const seconds = Math.floor(date.getTime() / 1000);
const milliseconds = date.getTime();
dateResult.innerHTML = `
<div class="mb-1"><strong>Seconds:</strong> ${seconds}</div>
<div class="mb-1"><strong>Milliseconds:</strong> ${milliseconds}</div>
<div class="text-xs text-slate-600 dark:text-slate-400">
<strong>UTC:</strong> ${date.toUTCString()}
</div>
`;
} catch (error) {
dateResult.textContent = 'Invalid date';
}
}
// Quick actions
function setToNow() {
const now = new Date();
unixInput.value = Math.floor(now.getTime() / 1000);
unixFormat.value = 'seconds';
convertUnixToHuman();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
dateInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
convertHumanToUnix();
}
function setToToday() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
dateInput.value = `${year}-${month}-${day}T00:00`;
convertHumanToUnix();
}
function setToYesterday() {
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const year = yesterday.getFullYear();
const month = String(yesterday.getMonth() + 1).padStart(2, '0');
const day = String(yesterday.getDate()).padStart(2, '0');
dateInput.value = `${year}-${month}-${day}T00:00`;
convertHumanToUnix();
}
function setToTomorrow() {
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const year = tomorrow.getFullYear();
const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
const day = String(tomorrow.getDate()).padStart(2, '0');
dateInput.value = `${year}-${month}-${day}T00:00`;
convertHumanToUnix();
}
// Event listeners
convertUnixBtn.addEventListener('click', convertUnixToHuman);
convertDateBtn.addEventListener('click', convertHumanToUnix);
nowBtn.addEventListener('click', setToNow);
todayBtn.addEventListener('click', setToToday);
yesterdayBtn.addEventListener('click', setToYesterday);
tomorrowBtn.addEventListener('click', setToTomorrow);
// Also convert when input changes
unixInput.addEventListener('input', convertUnixToHuman);
dateInput.addEventListener('input', convertHumanToUnix);
unixFormat.addEventListener('change', convertUnixToHuman);
unixTimezone.addEventListener('change', convertUnixToHuman);
dateTimezone.addEventListener('change', convertHumanToUnix);
// Initial conversion
convertUnixToHuman();
convertHumanToUnix();
});
</script>
</body>
</html>
02-25 08:40
暂无回复
No comments yet
登录 后可以评论
ClarkZhang
in the timezone select, add Asia/Shanghai
02-25 08:42
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论