注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)

第一步:构建计时函数

在这里我们按照倒计时和计时器合二为一的方式来编写
即无论是目标时间是未来时间还是过去时间,均可输出对应的语句
//@function 根据目标时间在当前时间的前后分别返回距离XXX已过去XX天XX小时XX分XX秒或距离XXXX还有:XX天XX小时XX分XX秒
//@param endT为目标时间,需按照字符串格式输入;endName为目标时间的名字,默认为目标时间;obj为在网页内的输出对象.
//@return true表示为目标时间为过去,false表示目标时间为未来


//@function 根据目标时间在当前时间的前后分别返回`距离XXX已过去XX天XX小时XX分XX秒`或`距离XXXX还有:XX天XX小时XX分XX秒`
//@param  endT为目标时间,需按照字符串格式输入;endName为目标时间的名字,默认为`目标时间`;obj为在网页内的输出对象.
//@return  true表示为目标时间为过去,false表示目标时间为未来function timeDifference(endT, endName = `目标时间`, obj) {var startTime = new Date().getTime();//引入当前时间戳var endTime = new Date(endT).getTime();//引入结束目标时间戳var secondDif = parseInt((endTime - startTime) / 1000);//计算真实时间差,单位s/秒if (secondDif < 0) {var secondDifference = -secondDif;} else {var secondDifference = secondDif;}//定义时间差为正var day = parseInt(secondDifference / 24 / 60 / 60);//计算出天数取整var hour = parseInt(secondDifference / 60 / 60) % 24;//计算出总小时数去掉达到一天24h的部分var minute = parseInt(secondDifference / 60) % 60;//计算出总分钟数去掉达到一小时60分钟的部分var second = secondDifference % 60;//总秒数去掉达到一分钟60秒的部分if (secondDif < 0) {obj.innerHTML = `距离${endName}已过去:<br><span>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒</span>`return false;} else {obj.innerHTML = `距离${endName}还有:<br><span>${day < 10 ? '0' + day : day} 天 ${hour < 10 ? '0' + hour : hour} 小时 ${minute < 10 ? '0' + minute : minute} 分钟 ${second < 10 ? '0' + second : second} 秒</span>`return true;}//根据真实时间差选择输出语句.}

第二步.在body里创建输出的对象

在html文件的body里添加输出对象并命名.

第三步.在body中调用js文件以及创建script标签

第四步.设置计时器实现数字变动

方法一.定时器

<body><h2 id="h2"></h2>//在这里以h2为例<script src="./../functionTools.js"></script>//调用js文件<script>var h=document.getElementById(h2);//调取html中的输出对象//计时器方法一timeDifference(`2022/1/9 16:52:00`, `过年放假`,h2);//此处先调用一次防止出现刷页面后没有内容function a(){timeDifference(`2022/1/9 16:52:00`, `过年放假`,h2);}//设置好时间差函数的调用参数,封装函数便于定时器调用setInterval(a,1000);//定时器设置每1000毫秒即1s执行一次a函数</script>
</body>

方法二.延时器构造函数实现每隔1s递归

<body><h2 id="h2"></h2>//在这里以h2为例<script src="./../functionTools.js"></script>//调用js文件<script>var h=document.getElementById(h2);//调取html中的输出对象//计时器方法二timep();调用递归函数function timep() {timeDifference(`2022/1/9 16:52:00`, `过年放假`,h2); //此处先调用一次防止出现刷页面后没有内容 ptimer = setTimeout(timep, 1000); //在延时器中设置每过1000ms,即1s调用timep函数实现递归}</script>
</body>

五.设置样式

<style>h2 {width: 100%;line-height: 80px;font-size: 50px;color: black;text-align: center;position: fixed;top: calc(50% - 160px);}h2 span{font-size: 35px;}
html{height: 100%;
}body {width: 100%;height: 100%;overflow: hidden;background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11695386033%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643859661&t=56c2c6c10490dd71ced649cc1dc90ac0);background-size: 100% 100%;}
</style>

成品图奉上

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数相关推荐

JavaScript 实现抢购倒计时,记录恋爱1314纪念日倒计时,输出对应的天数小时分钟秒数
效果图: 1.先建立两个盒子 <div class="div"><div class="box"> </div></d ...
使用Java的Calendar类计算两段时间之间的工作日的天/小时/分钟/秒数
计算两段时间之间的工作日的天/小时/分钟/秒数我们能经常遇到一些需求,让获取工作日的时间(当然,调休也上班也是工作日哈!),之前自己给这搞得头大,所以整理总结,把该工具类记录下来,希望大家能用到的时 ...
计算两时间段的重合天/小时/分钟/秒数（末尾附完整代码）
说明: 有时候我们在计算时间时,有让获取两时间段重合的天数这种需求,小编也是遇到了这样的需求,就封装了一个工具类,希望能帮助到大家. 我们先进行分析求两个时间段重合的天数,例如求(2022-05-0 ...
php 计算日期差几周,PHP计算两个时间之差的函数(年,月,周,日,小时,分钟,秒数)
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 PHP 2 // 时间格式为YYYYMMDDHHmmss 3 function timeDiff( $aTime , $bTime ) 4 { 5 ...
java 根据日期计算当前周一和周日，及根据秒数计算天小时分钟秒数等相关日期
日期工具类 import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; ...
Excel计算开始与结束时间之间的小时/分钟/秒数
可以看到表格中的数据格式是年/月/日 00:00,通过公式计算两格之间的差值: =(F2-E2) 这个是时候计算出来的差值并不是我们需求的分钟和秒数: 对G列单击鼠标右键,点设置单元格格式: 将格式设 ...
sql计算上班总时长——以每天的第一次上下班打卡时间为准
本文交代了一种求上班总时长的特殊的业务场景,并造了一个玩具数据 ,分别用MySQL和Hive SQL给出了其计算逻辑. 一.业务背景及口径说明指标上班总时长 = SUM(下班时间-上班时间) ,但 ...
【初学python】：输入秒数，输出对应小时/分钟/秒
输入秒数,按照计时器格式输出对应小时,分钟,秒输入格式: 打印出"请输入秒数:"字样,输入任意整数表示秒数输出格式: 输出对应小时,分钟,秒.输出格式为:XX:XX:XX 输入 ...
html 分钟转化秒,JS将时间秒转换成天小时分钟秒的字符串
项目中需求是这样,接口返回的数据中时间单位为秒,但前端显示的时候需要更人性化的带有单位(天,小时,分钟,秒)的字符串: 转换函数如下: /** * 格式化秒 * @param int value 总秒 ...

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数

JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数

注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)

第一步:构建计时函数

第二步.在body里创建输出的对象

第三步.在body中调用js文件以及创建script标签

第四步.设置计时器实现数字变动

方法一.定时器

方法二.延时器构造函数实现每隔1s递归

五.设置样式

成品图奉上

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数相关推荐

最新文章

热门文章

JavaScript 实现页面内时间实时倒计时 计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数

JavaScript 实现页面内时间倒计时 计时器 可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数

注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制)

第一步:构建计时函数

第二步.在body里创建输出的对象

第三步.在body中调用js文件以及创建script标签

第四步.设置计时器实现数字变动

方法一.定时器

方法二.延时器构造函数实现每隔1s递归

五.设置样式

成品图奉上

JavaScript 实现页面内时间实时倒计时 计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数相关推荐

最新文章

热门文章

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数

JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数

JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数相关推荐