js计算两个时间戳的时间差之多少天、时、分、秒，格式00:00、00:00:00、动态显示年月日时分秒（不足两位补0）
实例1-几天几小时几分钟几秒
src\utils\utils.ts
几天几小时几分钟几秒
1、定义方法
//计算两个时间之间的时间差 多少天时分秒 function intervalTime(startTime,endTime) {
// var timestamp=new Date().getTime(); //计算当前时间戳 var timestamp = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级) var date1 = ""; //开始时间 if(timestamp<startTime){
date1=startTime; }else{
date1 = timestamp; //开始时间 } var date2 = endTime; //结束时间 // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数 var date3 = (date2- date1)*1000; //时间差的毫秒数 //计算出相差天数 var days = Math.floor(date3 / (24 * 3600 * 1000)); //计算出小时数 var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数 var hours = Math.floor(leave1 / (3600 * 1000)); //计算相差分钟数 var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数 var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差秒数 var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数 var seconds = Math.round(leave3 / 1000); console.log(days + "天 " + hours + "小时 ") // return days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒" return days + "天 " + hours + "小时 " } 2、暴露给外部调用
module.exports = {
intervalTime } 3、其他页面导入
import {
intervalTime } from "@/common/util.js" 4、data中声明
data() {
return {
intervalTime:intervalTime }; }, 5、页面中使用
<view class="cu-tag bg-green light sm round"> {
{intervalTime(dataItem.volunteer_start_time,dataItem.volunteer_end_time)}} </view> 6、效果
注意：后面如果自己需分、秒，自己同理加上去。
实例2、动态显示年月日时分秒（不足两位补0）
1、
<html> <head>
<meta http-equiv="Content-Type” content="text/html; charset=gb2312">
<title>动态显示年月日星期时分秒</title> <script type="text/javascript"> var days = new Array("日", "一", "二", "三", "四", "五", "六"); function showDT() {
var currentDT = new Date(); var y, m, date, day, hs, ms, ss, theDateStr; y = currentDT.getFullYear(); //四位整数表示的年份 m = currentDT.getMonth() + 1; //月 date = currentDT.getDate(); //日 day = currentDT.getDay(); //星期 hs = currentDT.getHours(); //时 ms = currentDT.getMinutes(); //分 ss = currentDT.getSeconds(); //秒 theDateStr = y + "年" + m + "月" + date + "日 星期" + days[day] + " " + hs + ":" + ms + ":" + ss; document.getElementById("theClock").innerHTML = theDateStr; // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 window.setTimeout(showDT, 1000); } </script> </head> <body onload="showDT()"> <div id="theClock" style="font-weight: bold; width: 300px"></div> </body> </html> 补0
<body οnlοad="showDT()"> <div id="theClock" style="font-weight: bold; width: 300px"></div> </body> <script> function showDT() { var date = new Date(); //年 var year = date.getFullYear(); //月 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; //日 var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //时 var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //分 var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //秒 var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); var nowTime = year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss; nowTime = year + "年" + month + "月" + day + "日" + " " + hh + ":" + mm + ":" + ss; document.getElementById("theClock").innerHTML = nowTime; // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 window.setTimeout(showDT, 1000); } </script> 注
// 用这两句代码替换，能得到的补零效果 var hour = ('0' + date.getHours()).slice(-2); var hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours(); // 三元表达式 function add0(time){
if(time<10){
time = ""+"0"+time; } return time; } 效果
实例3、格式00:00
1、定义方法
src\utils\utils.ts
//将时间戳-毫秒转为分秒 00:00 export const formatSeconds = (value:number) => {
// value: var millisecond = value % (24 * 3600 * 1000); //计算时间戳转换的的毫秒数 //计算相差分钟数 var num1 = millisecond % (3600 * 1000); //计算小时数后剩余的毫秒数 var minutes = Math.floor(num1 / (60 * 1000)) < 10 ? "0" + Math.floor(num1 / (60 * 1000)) :Math.floor(num1 / (60 * 1000)); // 0~9前补0 //计算相差秒数 var num2 = num1 % (60 * 1000); //计算分钟数后剩余的毫秒数 var seconds = Math.round(num2 / 1000) < 10 ? "0" + Math.round(num2 / 1000) : Math.round(num2 / 1000); return minutes + ':'+ seconds } 2、页面使用
index.vue
<template> <div v-for="(item, index) in newSongList" :key="item.id"> <!-- 数组排序补0 --> <span>{
{ index+ 1 < 10 ? '0' + `${index + 1}` : `${index + 1}`}}</span> <!-- playTime: --> <span>{
{ formatSeconds(item.bMusic.playTime) }}</span> </div> </template> <script lang="ts" setup> import { formatSeconds } from '@/utils/utils' </script> 3、效果
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10784.html