javaScript系列 [07]-日期类型和计时器

2022-01-01 16:33:56 阅读：199 来源： 互联网

标签：leftTime 07 javaScript 60 length 计时器 1000 Math PrefixInteger

本文介绍JavaScript语言中的Date日期类型，常见的日期格式处理方式以及计时器相关方法(主要包含setInterval以及setTimeOut)。

倒计时实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="timeID"></div>
<script>

var endTimeStr = "2018/10/30 20:00:00";
var oDiv = document.querySelector("#timeID");

function count() {

//获取当前时间
var now = new Date().getTime();
//获取截止时间
var end = new Date(endTimeStr).getTime();

//计算时间差
var leftTime = end - now;

//定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s, timeResult = "已结束";

if (leftTime >= 0) {

d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
timeResult="距离结束的时间为：" + d + " 天 " + h + " 小时 " + m + " 分钟 " + s + " 秒"
}

//更新页面信息
oDiv.innerHTML = timeResult;
}

setInterval(count,1000);
</script>
</body>
</html>

数据填充 | 补零处理

我们在真实的开发场景中可能需要在对一些数据进行处理的时候进行补零操作。什么意思呢，譬如在上面实现倒计时效果的案例中如果我需要得到的倒计时效果是：05天 04小时 27分钟 32秒的格式，那么就需要在最后进行拼接之前再进行额外的格式化处理。

我们在显示一个数字的时候(比如是5)，那么想要呈现出的结果可以是5也可以是05，这里我们主要探讨后一种情况。这里给出三种具体的实现方案，推荐使用最后一种(更高效也更直接)。

//参数说明：
//第一个参数:num 要具体处理的数据
//第二个参数:length 目标数据的长度

// 第一种实现方案
// function PrefixInteger(num, length) {
// return (num/Math.pow(10,length)).toFixed(length).substr(2);
// }

//第二种实现方案
// function PrefixInteger(num, length) {
// return ( "0000000000000000" + num ).substr( -length );
// }

//第三种实现方案
function PrefixInteger(num, length) {
return (Array(length).join('0') + num).slice(-length);
}

console.log(PrefixInteger(4, 2)); //04
console.log(PrefixInteger(41, 10)); //0000000041

如果前面示例程序中倒计时中具体的时间数值需要2位对齐，不够两位的补零，那么就可以考虑在最终拼接之前调用PrefixInteger方法并指定length的值为2来进行格式化操作。这里给出对具体时间进行格式化的调用代码和结果示例。

d = PrefixInteger(Math.floor(leftTime / 1000 / 60 / 60 / 24),2);
h = PrefixInteger(Math.floor(leftTime / 1000 / 60 / 60 % 24),2);
m = PrefixInteger(Math.floor(leftTime / 1000 / 60 % 60),2);
s = PrefixInteger(Math.floor(leftTime / 1000 % 60),2);

timeResult = "距离结束的时间为：" + d + " 天 " + h + " 小时 " + m + " 分钟 " + s + " 秒";

//timeResult的结果示例：距离结束的时间为：08 天 04 小时 27 分钟 07 秒

标签：leftTime,07,javaScript,60,length,计时器,1000,Math,PrefixInteger
来源： https://www.cnblogs.com/wendingding/p/15755586.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javaScript系列 [07]-日期类型和计时器