例子---年倒计时/JS日期对象类型

这两天闲着没事,在这感叹一年过得真快,转眼过不了几天,感觉又要过年了,唉~越大一年过得越快哟。然后就想到写一个年倒计时,以记录点滴岁月的飘走,哈哈,本来想着挺简单的,但是写了才发现,它是有一个小坑的,不知大家注意到了没~
实现思路:主要就是用当年的最后一刻减去现在的时间,然后经过换算得到我们需要的数据。
OK,同样的,话不多说,上代码~

var wrap = document.getElementsByClassName("wrap")[0];
function Time(){
    var date1 = new Date();//写这篇博文的时间是2017.11.02上午10点
    var year = date1.getFullYear();
    console.log(date1.getMonth());//10
    var date2 = new Date(year,11,30,23,59,59);
    var time = (date2 - date1)/1000;
    var day = Math.floor(time/(24*60*60));
    var hour = Math.floor(time%(24*60*60)/(60*60));
    var minute = Math.floor(time%(24*60*60)%(60*60)/60);
    var second = Math.floor(time%(24*60*60)%(60*60)%60);
    var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
    wrap.innerHTML = str;
}
//放在一秒执行一次的定时器内
setInterval(function(){
    Time();
},1000);

OK,代码写完了,有没有发现创建日期那里给的月份是11月呢,这时候大家有没有疑惑:一年不是12个月吗?额~反正笨笨的我是纠结了一会,我甚至在想难不成系统啥时候更改了,而且打印出来的月份也是10月,可是现在明明是11月份啊,就在这时候,我想起来了万能的笔记,哈哈哈,然后我去一查才发现,有一个小点我给忘记了。
请看,然后就豁然开朗了~
getFullYear();获取四位数的全年
getMonth();月份0-11,十二月为0(重点在这里重点在这里重点在这里!!!)
getHours();获取小时0-23
getMinutes();获取分钟0-59
getSeconds();获取秒钟0-59
另外JS日期对象需要的注意的点,除了获取月份以外,还有一点是需要注意的,那就是:
getDay()和getDate()的区别
getDay()是获得一个星期中的第几天,星期的获取是从0-6哦,0代表周天,谨记谨记谨记!!!
getDate()是获得一个月中的第几天

好了,最后补充一下,Math.floor()是JS数学对象中的下舍入

例子:
var num1 = Math.floor(4.9);
var num2 = Math.floor(4.1);
if(num1 == num2){
    console.log("num1,num2处理完之后是相等的,都是4");
}
答案当然是会打印啦~

倒计时效果图:
这里写图片描述

好嘞,大家学习愉快,拜~

可以使用JavaScript中的日期对象来实现倒计时。下面是一个简单的例子: ```javascript // 倒计时时间(单位:毫秒) var countdownTime = 10000; // 获取当前时间 var now = new Date().getTime(); // 计算倒计时结束时间 var countdownEndTime = now + countdownTime; // 更新倒计时显示 var countdownElement = document.getElementById("countdown"); var countdownInterval = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算剩余时间 var remainingTime = countdownEndTime - now; // 将剩余时间转换为天、小时、分钟、秒 var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时显示 countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 如果倒计时结束,清除计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdownElement.innerHTML = "倒计时结束!"; } }, 1000); ``` 在上面的例子中,我们首先定义了倒计时时间 `countdownTime`,然后使用 `new Date().getTime()` 获取当前时间。我们将当前时间和倒计时时间相加,得到倒计时结束时间 `countdownEndTime`。 然后,我们使用 `setInterval` 创建一个定时器,每隔一秒钟更新一次倒计时显示。在定时器回调函数中,我们首先获取当前时间 `now`,然后计算剩余时间 `remainingTime`。接下来,我们将剩余时间转换为天、小时、分钟、秒,并更新倒计时显示。 最后,如果剩余时间小于等于0,说明倒计时已经结束,我们清除定时器并更新倒计时显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值