js倒计时,现在与未来的某个时间点 相差多长时间
第一步:获取系统当前时间
HTML:
<button class="time-button public_button">距离开售 <span class="hours">21</span> : <span class="minutes">00</span> : <span class="seconds">56</span></button>
//获取当前时间function getTime(){let data = new Date()let y = data.getFullYear() //年let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间 格式:2022/09/08 09:09:09let data2 = '2022/09/28 17:30:00' //未来时间//这里返回两个参数 一个当前的系统时间 一个 未来的时间return{data1, //当前时间data2 //未来时间}}
let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1)
//看不懂这种写法的,可以理解为 小于10的 前面加个0拼接上去 例如系统默认是(2000/9/9) 而这种写法最终格式(2022/09/09)
第二步:
获取dom的类,也就是渲染的倒计时模块
//获取倒计时的类let class_hours = document.querySelector('.hours')let class_minutes = document.querySelector('.minutes')let class_seconds = document.querySelector('.seconds')
第三步:
计算时间 也就是:未来时间 - 当前时间 = 中间相差多长时间
//使用毫秒转换时分秒function formatDuring(){//时间转换并取得毫秒let dayTime = new Date(getTime().data1)let future = new Date(getTime().data2)//取得毫秒let mss = parseInt(future - dayTime)// console.log('ss:',parseInt(future - dayTime))//毫秒转 天时分秒let day = parseInt(mss / (1000*60*60*24)) //天数let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60)) //小时let minutes = parseInt((mss % (1000*60*60)) / (1000*60)) //分钟let seconds = parseInt(mss % (1000*60)) / 1000 //秒//天数大于0 则 天*24 取得小时 并与今日小时相加if(day > 0){hours += (day * 24)}//渲染到页面class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`let time = `${hours}:${minutes}:${seconds}`//判断时间是否到时if(hours <= 0 && minutes <= 0 && seconds <= 0){time = 0}return time}
第四步:
获取按钮元素
//获取按钮元素let time_button = document.querySelector('.time-button') //倒计时按钮
第五步:
启用定时器开始倒计时
//开始倒计时let timeVal = setInterval(()=>{// let time = `${hours}:${minutes}:${seconds}`//这里如果 return给的0代表时间已经走完if(formatDuring() <= 0){console.log("12",formatDuring())//倒计时走完则清除倒计时按钮time_button.remove()clearInterval(timeVal)}},1000)
第六步:
查看效果,mp4转gif有点浑 自己看大致效果吧
当前时间(2022/09/28 14:06:xx) - 未来时间(2022/09/28 14:07:00)
= 下方效果图
let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间let data2 = '2022/09/28 14:07:00' //未来时间
最后一点 不知道的怎么写的话 可以直接复制下面的代码 然后样式稍作修改就行了。
这里只需要找到未来时间 修改未来时间就行了
未来时间(let data2 = ‘2022/09/28 14:20:00’)修改这个就行
在运行之前先修改未来时间 不然看着是无效果的
<button class="time-button public_button">距离开售 <span class="hours">21</span> :<span class="minutes">00</span> :<span class="seconds">56</span>
</button><script>//获取当前时间function getTime(){let data = new Date()let y = data.getFullYear() //年let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间 格式:2022/09/08 09:09:09let data2 = '2022/09/28 14:20:00' //未来时间//这里返回两个参数 一个当前的系统时间 一个 未来的时间return{data1, //当前时间data2 //未来时间}}//获取倒计时的类let class_hours = document.querySelector('.hours')let class_minutes = document.querySelector('.minutes')let class_seconds = document.querySelector('.seconds')//使用毫秒转换时分秒function formatDuring(){//时间转换并取得毫秒let dayTime = new Date(getTime().data1)let future = new Date(getTime().data2)//取得毫秒let mss = parseInt(future - dayTime)// console.log('ss:',parseInt(future - dayTime))//毫秒转 天时分秒let day = parseInt(mss / (1000*60*60*24)) //天数let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60)) //小时let minutes = parseInt((mss % (1000*60*60)) / (1000*60)) //分钟let seconds = parseInt(mss % (1000*60)) / 1000 //秒//天数大于0 则 天*24 取得小时 并与今日小时相加if(day > 0){hours += (day * 24)}//渲染到页面class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`let time = `${hours}:${minutes}:${seconds}`//判断时间是否到时if(hours <= 0 && minutes <= 0 && seconds <= 0){time = 0}return time}//获取按钮元素let time_button = document.querySelector('.time-button') //倒计时按钮//开始倒计时let timeVal = setInterval(()=>{// let time = `${hours}:${minutes}:${seconds}`//这里如果 return给的0代表时间已经走完if(formatDuring() <= 0){console.log("12",formatDuring())//倒计时走完则清除倒计时按钮time_button.remove()clearInterval(timeVal)}},1000)
</script>
js倒计时,现在与未来的某个时间点 相差多长时间相关推荐
- python获取目标时间距离现在多长时间(‘2020-5-30 23:40:00‘)
获取目标时间距离现在多长时间 import time,datetime# 输入目标的时间 time_new = '2020-5-30 23:40:00' timeArray_new = time.st ...
- “一炷香”的时间到底是多长时间?
我所看过的武侠剧大都是在10岁之前,那个连黑白电视都匮乏的年代,全村唯独我家拥有一台21寸的日立牌彩色电视机,这也成了全村人的稀罕.夏日吃过晚饭,大人小孩便搬着板凳拎着马扎,兴致勃勃的排排坐,从屋里排 ...
- linux 查看mysql运行时间_linux – strace显示从mysql socket读取很长时间 – mysql需要很长时间才能执行查询?...
我的Apache服务器需要很长时间来处理请求.我附上了strace,可以看到以下两个延迟: 1)非常关键(处理143秒) 1335 0.000037 write(16, "\235\0\0\ ...
- mysql长时间后断开_mysql 长时间没连接了 就会自动断开服务
这是因为mysql 长时间没连接了 就会自动断开服务. 解决办法 1.首先,下载必须的jar包 dbcp 包,目前版本是1.2.1:http://jakarta.apache.org/commons/ ...
- js倒计时代码(从现在距离明年元旦还剩多少时间)?
<div id="all"><div class="timetext"><div>2023年元旦倒计时</div> ...
- php 多长时间前,php 多长时间之前 的函数
/* * author: china_skag * time: 2014-07-08 * 发博时间计算(年,月,日,时,分,秒) * $createtime 可以是当前时间 * $gettime 你要 ...
- java idle耗时_chrome中性能分析工具分析页面中Idle(空闲时间)占用太长时间,会不会影响页面性能,如果会是什么原因造成的?...
看了楼上诸多回答,真是为现在前端开发者捏了一把汗啊!题主不懂就罢了,答题的人不懂也硬往上凑,你们心可真大啊-- 吐槽完毕,正经回答一下. 这里的 idle 含义是复合性质的,不能完全等同于服务器加载的 ...
- 怎样在手机上设置高考倒计时?查看离高考还有多长时间
高中对于每个学生来说都是非常重要的阶段,而高考更是重中之重,因为高考成绩的好坏直接决定了绝大多数人可以去哪所大学就读.每年高考的时间基本上都定于公历的6月7日.8日这两天,无论是对于马上就要参加高考的 ...
- 动物之森服务器维护时间,动物之森怎么更改时间 动物森友会改时间方法及注意事项...
动物之森怎么更改时间?在动物之森中有些任务需要等待很长时间才能成功触发,为了节省时间很多玩家都会用穿越的方法投机取巧,也就是更改NS主机的时间.下面就是动物森友会改时间方法及注意事项了,大家一起来看看 ...
最新文章
- 技术图文:双指针在求解算法题中的应用
- healpy的安装(包括healpix)
- 并发环境下HashMap引起的full gc排查
- mysql zf,mysql workbench建表时PK,NN,UQ,BIN,UN,ZF,AI的含义
- 使用过滤器监控网站流量
- c++Numerical string sort数字字符串排序的实现算法(附完整源码)
- mahout学习笔记4
- 8、mysql数据表中数据的增删改
- 内存映射文件 写入 卡住_在Java中使用内存映射文件时检测(写入)失败
- YY:马化腾的大漏招
- GCD中的队列与任务
- WAMP显示错误“MSVCR100.dll”缺少安装时
- 永别了!2200元,老外眼中的2200元神机缺货数月后下架
- linux 网络对讲,基于ARM与Linux的全数字化可视对讲系统的设计与实现
- 二分图的最大匹配--匈牙利算法
- python对gif图压缩
- AE Saber插件画奥特曼
- 目标检测使用的数据增强方法汇总
- 【Unity】Unity 2D游戏开发(一)U2D基础功能
- 那些年我用过的JSON格式化工具
热门文章
- pygame学习笔记(5)——精灵
- OSChina 周二乱弹 —— 球真的很难玩!
- win2003dns服务器其它域名解析不,让dns服务器支持泛域名解析_windows 2003
- python输出字典的key_python3 打印输出字典中特定的某个key的方法示例
- JS设计模式——工厂模式
- java split 以空格_java split 两个参数(java split 空格)
- Java压缩20M文件非常厉害
- ExternalInterface类的使用
- 高DPI显示---High DPI Displays
- android 圆形倒计时实现