时间戳与时间的互转

做项目的时候经常后台开发甩过来一堆的时间戳,我问过java开发人员为什么要转成时间戳,他们的解释是转成数值型空间比较小,比较好处理。好吧,不管为甚了,反正传到前端,我们都要处理。

展示的时候当然要的是时间格式


// 获取某个时间格式的时间戳
var date = new Date(); //时间对象
var str = date.getTime(); //转换成时间戳
var time = new Date("2014-07-10 10:21:12");
var str = time.getTime();


// 将时间戳换成时间格式字符串
var timestamp3 = 1403058804;
var newDate = new Date();
newDate.setTime(timestamp3 * 1000);
// Wed Jun 18 2014 
console.log(newDate.toDateString());
// Wed, 18 Jun 2014 02:33:24 GMT 
console.log(newDate.toGMTString());
// 2014-06-18T02:33:24.000Z
console.log(newDate.toISOString());
// 2014-06-18T02:33:24.000Z 
console.log(newDate.toJSON());
// 2014年6月18日 
console.log(newDate.toLocaleDateString());
// 2014年6月18日 上午10:33:24 
console.log(newDate.toLocaleString());
// 上午10:33:24 
console.log(newDate.toLocaleTimeString());
// Wed Jun 18 2014 10:33:24 GMT+0800 (中国标准时间)
console.log(newDate.toString());
// 10:33:24 GMT+0800 (中国标准时间) 
console.log(newDate.toTimeString());
// Wed, 18 Jun 2014 02:33:24 GMT
console.log(newDate.toUTCString());

你可以使用 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> ``` 在此示例中,我们使用了一个表单,用户可以在表单中输入时间戳或者时间,然后点击“转换”按钮进行转换。转换结果将会在页面中显示出来。注意,这里我们使用了一个正则表达式来判断输入是否为时间戳。如果不是时间戳,则将其当做时间来处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值