<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
// 如果time2大于time1 返回true 否则 返回false
function compareTime(time1, time2) {
return time_to_sec(time2) - time_to_sec(time1) > 0
}
function compareTime1(time1, time2) {
let mss = time_to_sec(time2) - time_to_sec(time1);
console.log(mss)
// s
var days = parseInt(mss / (60 * 60 * 24));
var hours = parseInt((mss % (60 * 60 * 24)) / (60 * 60));
var minutes = parseInt((mss % (60 * 60)) / 60);
var seconds = mss % 60;
// ms
// var days = parseInt(mss / (1000 * 60 * 60 * 24));
// var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
// var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
// var seconds = (mss % (1000 * 60)) / 1000;
return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
// //获取年份
// var year = new Date(timdedetail).getFullYear();
// //获取月份
// var month = new Date(timdedetail).getMonth() + 1;
// if (month < 10) {
// month = "0" + month;
// }
// //获取日
// var date = new Date(timdedetail).getDate();
// if (date < 10) {
// date = "0" + date;
// }
// //获取小时
// var h1 = new Date(timdedetail).getHours() < 10 ? '0' + new Date(timdedetail).getHours() : new Date(timdedetail)
// .getHours();
// //获取分钟
// var m1 = new Date(timdedetail).getMinutes() < 10 ? '0' + new Date(timdedetail).getMinutes() : new Date(
// timdedetail).getMinutes() < 10;
// //获取秒
// var s1 = new Date(timdedetail).getSeconds() < 10 ? '0' + new Date(timdedetail).getSeconds() : new Date(
// timdedetail).getSeconds();
// //组合格式为年-月-日 时:分:秒(2021-07-05 21:21:21)
// var starttime = year + "-" + month + "-" + date + " " + h1 + ":" + m1 + ":" + s1;
// return starttime;
}
//将时分秒转为时间戳
function time_to_sec(time) {
if (time !== null) {
// var s = "";
// var hour = time.split(":")[0];
// var min = time.split(":")[1];
// var sec = time.split(":")[2];
// s = Number(hour * 3600) + Number(min * 60) + Number(sec);
// return s;
var len = time.split(':')
if (len.length == 3) {
var hour = time.split(':')[0];
var min = time.split(':')[1];
var sec = time.split(':')[2];
return Number(hour * 3600) + Number(min * 60) + Number(sec);
}
if (len.length == 2) {
var min = time.split(':')[0];
var sec = time.split(':')[1];
return Number(min * 60) + Number(sec);
}
if (len.length == 1) {
var sec = time.split(':')[0];
return Number(sec);
}
}
}
console.log(compareTime('20:00', '19:00'))
console.log(compareTime1('00:00:00', '01:59:00'))
console.log(compareTime1('21:59', '00:00'))
/*求当前时间距离2017-03-25 12:00:00(和女友相遇的时间) 之间的时间差*/
function timeElapse() {
var a = new Date();
var b = new Date(2017, 02, 25, 12, 00, 00); //月份要往前推一个月,理由自己百度
a = a.valueOf();
b = b.valueOf();
var c = a - b;
c = new Date(c);
var result = c.getFullYear() - 1970 + '年' + (c.getMonth()) + '个月' +
(c.getDate() - 1) + '天' + (c.getHours() - 8) + '个小时' + c.getMinutes() + '分钟' + c.getSeconds() + '秒';
//天也要往前推一天,小时需要减去8,但是问题是减8后hour会出现负值,
if ((c.getHours() - 8) < 0) {
result = reCaclute();
}
}
//为解决hour负值,将日期往后推一天,再在之前的基础上加24
function reCaclute() {
var a = new Date();
var b = new Date(2017, 02, 26, 12, 00, 00);
a = a.valueOf();
b = b.valueOf();
var c = a - b;
c = new Date(c);
var result = c.getFullYear() - 1970 + '年' + (c.getMonth()) + '个月' +
(c.getDate() - 1) + '天' + (c.getHours() - 8 + 24) + '个小时' + c.getMinutes() +
'分钟' + c.getSeconds() + '秒';
return result;
}
/**
* JS 计算两个时间间隔多久(时分秒)
* @param startTime "2019-10-23 15:27:23"
* @param endTime "2019-10-23 15:27:55"
* @return 1天2时3分5秒
*/
function twoTimeInterval(startTime, endTime) {
// 开始时间
let d1 = startTime.replace(/\-/g, "/");
let date1 = new Date(d1);
// 结束时间
let d2 = endTime.replace(/\-/g, "/");
let date2 = new Date(d2);
// 时间相差秒数
let dateDiff = date2.getTime() - date1.getTime();
// 计算出相差天数
let days = Math.floor(dateDiff / (24 * 3600 * 1000));
// 计算出小时数
let residue1 = dateDiff % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
let hours = Math.floor(residue1 / (3600 * 1000));
// 计算相差分钟数
let residue2 = residue1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
let minutes = Math.floor(residue2 / (60 * 1000));
// 计算相差秒数
let residue3 = residue2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
let seconds = Math.round(residue3 / 1000);
let returnVal =
((days == 0) ? "" : days + "天") +
((hours == 0) ? "" : days + "时") +
((minutes == 0) ? "" : minutes + "分") +
((seconds == 0) ? "" : seconds + "秒");
return returnVal;
}
// 秒转换为时分秒
function formatSeconds(value) {
var secondTime = parseInt(value); // 秒
var minuteTime = 0; // 分
var hourTime = 0; // 小时
if (secondTime >= 60) {
minuteTime = parseInt(secondTime / 60);
secondTime = parseInt(secondTime % 60);
if (minuteTime >= 60) {
hourTime = parseInt(minuteTime / 60);
minuteTime = parseInt(minuteTime % 60);
}
}
var result = "" + (parseInt(secondTime) < 10 ? "0" + parseInt(secondTime) : parseInt(secondTime));
// if (minuteTime > 0) {
result = "" + (parseInt(minuteTime) < 10 ? "0" + parseInt(minuteTime) : parseInt(minuteTime)) + ":" + result;
// }
// if (hourTime > 0) {
result = "" + (parseInt(hourTime) < 10 ? "0" + parseInt(hourTime) : parseInt(hourTime)) + ":" + result;
// }
return result;
}
console.log(formatSeconds(3600))
// 时分秒转化为秒
function timeEvent(e) {
var time = e;
var len = time.split(':')
if (len.length == 3) {
var hour = time.split(':')[0];
var min = time.split(':')[1];
var sec = time.split(':')[2];
return Number(hour * 3600) + Number(min * 60) + Number(sec);
}
if (len.length == 2) {
var min = time.split(':')[0];
var sec = time.split(':')[1];
return Number(min * 60) + Number(sec);
}
if (len.length == 1) {
var sec = time.split(':')[0];
return Number(sec);
}
// var hour = time.split(':')[0];
// var min = time.split(':')[1];
// var sec = time.split(':')[2];
// return Number(hour*3600) + Number(min*60) + Number(sec);
}
</script>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
前端动画素材在网页开发中扮演着重要角色,能够吸引用户注意、提升用户体验。以下是一些常见的前端动画素材的技术实现方式: CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式属性,实现更复杂、交互性更强的动画效果。常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 SVG 动画:使用 SVG(可缩放矢量图形)和 SMIL(同步多媒体集成语言)技术创建矢量图形动画,可以实现复杂的矢量图形动画效果,如路径动画、填充动画等。 Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 JavaScript 控制绘制过程,实现高度可定制化的动画效果,适用于需要实时渲染的复杂动画场景。 WebGL 动画:基于 WebGL(Web图形库)的 3D 图形渲染技术,可以实现高性能的复杂动画效果,适合开发需要展示 3D 动画的网页。 React 动画库:如果你在使用 React 框架,可以考虑使用像 React Spring、Framer Motion 等专门为 React 设计的动画库,简化动画开发流程。 CSS 预处理器:使用像 Sass、Less 等 CSS 预处理器可以简化 CSS 编写过程,提高样式代码的可维护性,进而对动画效果的实现有所帮助。 综上所述,前端动画素材的技术实现方式多种多样,开发者可以根据项目需求和个人技术偏好选择合适的方式来实现动画效果。
资源推荐
资源详情
资源评论
收起资源包目录
【前端素材】模板-实用js和css动画素材.zip (131个子文件)
蛋糕.htm 55KB
树结构获取最近子节点+根据子节点查找父节点.htm 7KB
树结构获取最近子节点+根据子节点查找父节点2.htm 6KB
节流.htm 6KB
完整版.htm 5KB
扫描.htm 4KB
判断两个对象是否相等.htm 4KB
相同数据进行分组.htm 4KB
a.htm 3KB
b.htm 3KB
1.htm 3KB
棋盘.htm 3KB
判断数字.htm 3KB
判断设备类型.htm 3KB
2.htm 3KB
渐变画铅笔.htm 2KB
围绕圆心布局.htm 2KB
3.htm 2KB
rgba与16进制互转.htm 2KB
if分支优化.htm 2KB
rgb与16进制互转.htm 2KB
摄像机图标.htm 2KB
导出json-excel表格.htm 2KB
将日期格式化为今天明天后天几天后.htm 2KB
围绕圆心布局2.htm 1KB
粘性小球.htm 1KB
常见数据脱敏.htm 1KB
数据映射处理.htm 1KB
图片闪光效果.htm 1KB
去除指定字符.htm 1KB
判断类型.htm 1KB
substring和substr的区别.htm 1000B
扫描圆环.htm 957B
按照num将数组拆分成小数组.htm 828B
数组合并.htm 825B
map.htm 780B
%循环取数组的值.htm 756B
删除对象中值为空的字段.htm 713B
十字形状.htm 668B
switch-break和return.htm 638B
typeof与undefined比较.htm 613B
文字复制到剪切板.htm 595B
switch(true).htm 540B
比较时分秒的大小.html 7KB
格式.html 4KB
index.html 4KB
常见字符串题.html 3KB
let.html 3KB
数组转tree.html 3KB
对象比较.html 3KB
delete.html 3KB
redeuce 数组去重并求和.html 3KB
箭头函数.html 3KB
footer.html 3KB
获取uuid.html 3KB
head.html 3KB
颜色转换2.html 2KB
数组最大最小.html 2KB
面向对象和面向过程.html 2KB
周.html 2KB
颜色进制转换.html 2KB
原生js实现数组循环渲染.html 2KB
object常用方法.html 2KB
根据某一项对数组分组.html 2KB
去除字符串空格.html 2KB
立即执行函数.html 2KB
for循环的settimeout.html 2KB
js-对象.html 2KB
checkbox选中.html 2KB
index.html 2KB
深拷贝与浅拷贝.html 2KB
年月日时分秒.html 2KB
从某个时间点开始倒计时1.html 2KB
reduce.html 2KB
手风琴.html 2KB
foreach.html 2KB
map处理双数组.html 2KB
数组删除index是否重置问题.html 2KB
js获取当前日期任意间隔时间.html 2KB
补0.html 2KB
数组扁平化.html 1KB
两个日期时间差.html 1KB
全排列.html 1KB
禁止复制.html 1KB
文字输入ing.html 1KB
实现同级元素删除类名.html 1KB
数组和字符串转换.html 1KB
数组删除delete和splice区别.html 1KB
原生js点击事件.html 1KB
横向模糊匹配.html 1KB
遍历拿true.html 1KB
当前日期一周数据.html 1KB
json的遍历.html 1KB
index2.html 1KB
forEach跳出循环.html 1KB
JS 获取当前日期为周几.html 1KB
天时分秒.html 1KB
倒计时2.html 1KB
指定开始日期和结束日期间的日期list.html 1KB
toggleClass.html 1KB
共 131 条
- 1
- 2
资源评论
枫蜜柚子茶
- 粉丝: 5828
- 资源: 2972
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- # 微信小程序-健康菜谱 基于微信小程序的一个查找检索菜谱的应用 ### 效果 !动态图(./res/gif/demo
- zabbix-get命令包资源
- 毕业设计,基于PyQt5实现的可视化界面的Python车牌自动识别系统源码
- 26-朴素贝叶斯分类.rar
- 没有安Matlab 也可以 生成FIR抽头系数工具.py
- python烟花代码.rar
- 实验目的: 1.构建基于verilog语言的组合逻辑电路和时序逻辑电路; 2.掌握verilog语言的电路设计技巧 3.完成如
- 扩展卡尔曼滤波matlab仿真
- 3_base.apk.1
- 躺赢者PRO飞控常见典型问题合集(续一)无名小哥 余义 20240501待修
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功