JavaScript实现倒计时功能2种方法实例
更新时间：2023年11月03日 10:07:38 作者：莫道一龙
很多网站在做活动时会出现一个截止时间倒计时的提示,下面这篇文章主要给大家介绍了JavaScript实现倒计时功能2种方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
封装时间函数
代码如下
function getTime() {
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);
var d = t.getDate() > 10 ? t.getDate() : '0' + t.getDate();
var h = t.getHours() > 10 ? t.getHours() : '0' + t.getHours();
var mt = t.getMinutes() > 10 ? t.getMinutes() : '0' + t.getMinutes();
var s = t.getSeconds() > 10 ? t.getSeconds() : '0' + t.getSeconds();
return y + '-' + m + '-' + d + ' ' + h + ':' + mt + ':' + s;
}
console.log(getTime());
**注意：**在上方函数中，月份需要+1，并且为了美观，通过三元表达式来给小于‘10’的月份、日期、时间加‘0’。
var m = t.getMonth() + 1 > 10 ? t.getMonth() + 1 : '0' + (t.getMonth() + 1);
实现倒计时
方法一
1.使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间，endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。
2.把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数（剩余毫秒数），除以 1000 得到剩余秒数，再除以 60 得到剩余分钟数，再除以 60 得到剩余小时数。除以 24 得到剩余天数。剩余秒数 lefttime/1000 模 60 得到秒数，剩余分钟数 lefttime/(1000 * 60) 模 60 得到分钟数，剩余小时数 lefttime/(1000 * 60 * 60) 模 24 得到小时数。
代码如下：
var showtime = function () {
var nowtime = new Date(), //获取当前时间
endtime = new Date("2023/6/18"); //定义结束时间
var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
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); //计算秒数
return d+ "天" + h+ ":" + m+ ":" + s; //返回倒计时的字符串
}
方法二
1.同方法一
2.定义day,hour,min,sen用来定义倒计时的天、时、分、秒，然后parseInt用来将得到的值转化为整数形式，再用得到的秒/60得到多少分再/60得到多少时再/24得到多少天。最后，hour/60/60%24：用所得的时间把大数除以24取余得到还要多少小时，分，秒同理。
代码如下：
function getCountdown(time) {
var newTime = +new Date();
var futureTime = +new Date(time);
var time = (futureTime - newTime) / 1000 //把毫秒数变成秒数
var d = parseInt(time / 3600 / 24)// 天数
var h = parseInt(time / 3600 % 24)// 小时
var m = parseInt(time / 60 % 60)// 分钟
var s = parseInt(time % 60)//秒
return d + '天' + h + '时' + m + '分' + s + '秒'
}
最后附上两种倒计时完整代码，一种为页面打印，一种为弹窗显示。
实时在页面展示
代码如下：
<p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
<script>
function showTime() {
var spans = document.querySelectorAll('span');
var endTime = new Date('2023-06-18 00:00:00').getTime();
var newTime = new Date().getTime();
var diffTime = (endTime - newTime) / 1000;
var day = parseInt(diffTime / 60 / 60 / 24);
var honur = parseInt(diffTime / 60 / 60 % 24);
var min = parseInt(diffTime / 60 % 60);
var sen = parseInt(diffTime % 60);
spans[0].innerText = day;
spans[1].innerText = honur;
spans[2].innerText = min;
spans[3].innerText = sen;
}
setInterval(showTime, 1000)
</script>
用户弹框输入自行倒计时
代码如下：
<script>
function getCountdown(time) {
var newTime = +new Date();
var futureTime = +new Date(time);
var time = (futureTime - newTime) / 1000 //把毫秒数变成秒数
var d = parseInt(time / 3600 / 24)// 天数
var h = parseInt(time / 3600 % 24)// 小时
var m = parseInt(time / 60 % 60)// 分钟
var s = parseInt(time % 60)//秒
return d + '天' + h + '时' + m + '分' + s + '秒'
}
var year = prompt('年份');
var months = prompt('月份');
var days = prompt('日');
var hours = prompt('时');
var minutes = prompt('分');
var seconds = prompt('秒');
var futureTime = year + '-' + months + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;
alert(getCountdown(futureTime));
</script>附：基于JavaScript实现自动更新倒计时效果
实现倒计时效果需要掌握js中的两个知识点：
1、setTimeout函数 每隔1秒钟更新秒钟时间
2、Date对象 计算时间差
下面贴出 元旦倒计时代码
<!DOCTYPE html>
<html>
<head>
<title>example.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
//定义计时器，每隔1秒钟调用timer函数
var timerCount= window.setTimeout("timer()",1000);
function timer(){
var date=new Date("2017","1","1","0","0","0");
var deadlineTime=date.getTime();
var nowDate=new Date();
var nowTime=nowDate.getTime();
var distTime=deadlineTime-nowTime;
//判断是否到达时间期限
if(distTime>0){
var d=Math.floor(distTime/1000/3600/24);
var h=Math.floor(distTime/1000/3600%24);
var m=Math.floor(distTime/1000/60%60);
var s=Math.floor(distTime/1000%60);
var str="距离2017年元旦还有"+d+"天"+h+"时"+m+"分"+s+"秒";
document.getElementById("timeout").innerHTML=str;
timerCount= window.setTimeout("timer()",1000);
}
else{
//到达时间期限的时候清楚计时器；
window.clearTimeout(timerCount);
alert("时间已到");
}
}
</script>
</head>
<body>
<p id="timeout"> </p>
</html>总结
到此这篇关于JavaScript实现倒计时功能2种方法的文章就介绍到这了,更多相关JSt倒计时功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js实现简单鼠标跟随效果的方法,涉及javascript鼠标事件与坐标获取等相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
本文通过实例代码给大家介绍了js 滚轮控制图片缩放大小和拖动，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天，我们配置过一份 webpack 配置，直接复制过来使用，这里就不多说了，然后就是在项目中引入我们的 less，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了javascript数组去重方法,通过2个示例对比分析了javascript数组去重的原理与操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了javascript基于DOM实现权限选择的方法,实例分析了javascript针对页面元素的动态选择与添加删除等操作的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环，我们可以循环对象的键或属性，在迭代对象属性或进行调试时，它可能很有用，但在迭代数组或对对象进行修改时，应该避免使用for...in循环，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了js控制div弹出层实现方法,可实现点击链接弹出div浮动层,且背景色变暗的效果,是一款非常实用的特效源码,需要的朋友可以参考下2015-05-05
关键字搜索时有下拉字段，在使用百度时会遇到,本例讲述用js实现类似的效果2014-08-08
下面小编就为大家分享一篇js最简单的双向绑定实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
在不同的文件里面配置不同的环境变量,可以让我们的配置更加容易维护和使用,这里我们说下vite配置环境变量和模式是怎么配置的,对vite环境变量相关知识感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论