首页 > 其他分享 >使用dayjs制作倒计时工具

使用dayjs制作倒计时工具

时间:2023-02-01 13:55:55浏览次数:38  
标签:02 dayjs format diffTime 倒计时 unix var 制作

  • 引入脚本
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/plugin/duration.min.js"></script>
  • 普通时间计算
dayjs().format('YYYYMMDDHHmmss'); //生成20220924193656的格式
dayjs().format('YYYY-MM-DD HH:mm:ss'); //生成2022-09-24 19:36:56的格式
dayjs.unix(value).format("YYYY-MM-DD"); //秒级时间戳转成日期格式
dayjs.unix(value).format("YYYY-MM-DD HH:mm:ss"); //秒级时间戳转成日期时间格式
dayjs(datetime).unix(); //日期格式转为秒级时间戳
  • 制作倒计时
// 倒计时
dayjs.extend(window.dayjs_plugin_duration);
function daojishi(endTime){
    var diffTime = dayjs.duration(endTime * 1000 - dayjs());
    var year     = diffTime.years();  //年
    var month    = diffTime.months(); //月
    var day      = diffTime.days();   //天
    var hours    = diffTime.hours();  //小时
    var minutes  = diffTime.minutes(); //分
    var seconds  = diffTime.seconds(); //秒
    return `${year}年${month}月${day}天${hours}小时${minutes}分${seconds}秒`;
}
setInterval(function(){
    document.getElementById("daoji").innerHTML = daojishi(dayjs("2025-02-02").unix());
    // console.log(daojishi(dayjs("2025-02-02").unix()));
},1000);

效果

标签:02,dayjs,format,diffTime,倒计时,unix,var,制作
From: https://www.cnblogs.com/comeround/p/17082313.html

相关文章

  • 网站 favicon 图标制作
    第一种:1、由一张图片在ps里边切片2、拿到切完的图在;:比特虫转换icon图标第二种就是:直接拿icon格式图标去引入显示就行了怎么在网站上显示图标<linkrel="shortcut......
  • delphi FireDAC制作主从表
    需求:窗体上下两个表,上面是主表,下面是从表.当点击主表上的记录时,从表显示出此物料的入仓记录效果如果所示  这里提供两种方案,其中第二种方案是在第一种方......
  • 歪兔工具条(YToolsforArcMap)简介之自然资源确权地籍调查表、登记簿制作工具
    相关链接:歪兔工具条(YToolsforArcMap)简介之自然资源确权地籍图图廓(标准分幅图)制作工具将登记单元信息、自然资源信息、关联信息写入一维数据表(Excel,各表以登记单元编码关联......
  • 用python制作一个简单的zip压缩工具
    1.功能设计对文件或文件夹压缩,是日常工作中经常要做的事情,市面上也有非常多的压缩工具,在linux系统里,有zip,tar等命令可以用于压缩。最近学习了python的zipfile模块,它提供......
  • cocos 扩展插件的制作
    在cocos里面创建一个新的扩展,会生成两个文件,一个是package.json和browser.js。json文件就是来写配置的,里面主要是配置当前的扩展如何打开,以及扩展的一些名称,描述,版本限制......
  • openwrt开发使用-制作patch补丁
    前言今天分享的内容是openwrt里面使用patch文件进行自己定制化开发。作者:良知犹存转载授权以及围观:欢迎关注微信公众号:羽林君或者添加作者个人微信:become_me安装quil......
  • linux--centos制作yum源
    一、制作本地yum源的步骤1、  创建iso存放目录和挂载目录[root@desktop~]#cd/mnt/[root@desktopmnt]#mkdirisoyum_mirror2、  将iso文件上传到iso存放目录......
  • DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
    DataGear数据可视化看板内置了一些基本、简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架。本文以Vue2、ElementUI前端框架为例,介绍如......
  • yolov5训练前准备工作(采样、制作数据集、数据集增强、数据集预处理)
    写在前面训练数据可以有多种输入方式,本文提到了其中一种。使用的时候注意工作路径。使用方法:收集图片,或使用video_2_jpg.py采样视频,(用cam_video.py拍视频,用get_img.py拍照......
  • 【c#】简单倒计时程序
         1usingSystem;2usingSystem.Collections.Generic;3usingSystem.ComponentModel;4usingSystem.Data;5usingSystem.Drawing;6using......