js倒计时原理及实例总结

倒计时原理：用未来的时间-当前的时间

未来的时间：可以利用date对象传参的方式，获取到未来的时间,参数的形式有两种：数字形式和字符串形式

new Date(2018,3,22,6,44,30)或者是new Date('April 22,2018 6:44:30')

现在的时间：用new Date()即可

注意事项：

用这种方法得到的时间单位是毫秒，所以要首先转为秒这样好计算（除以1000即可），不要忘记将得到的秒数取整（因为有可能有小数）

月份是从0开始计算的，所以如果是获取未来的时间，月份的话，比如4月，我们填的数字应该是3，如果是获取现在的时间，月份的话，如果是3，那么说明当前的月份是4月

补充：得到的月、日、时、分、秒我们尽量将其转化为两位数，这个我们可以将其封装为一个函数，用起来方便，我这里没有用到，但是我之前封装好的的代码如下：

function getTwo(n){return n<9?'0'+n:''+n ;
}

代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>倒计时</title>
<style>
.t1 { width:400px; }
</style>
<script>/*
var t =  Math.floor( new Date().getTime()/1000 );
alert( Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒' );
*/window.onload = function () {var aInp = document.getElementsByTagName('input');var iNow = null;var iNew = null;var t = 0;var str = '';var timer = null;aInp[2].onclick = function () {iNew = new Date(aInp[0].value);clearInterval( timer );timer = setInterval (function (){iNow = new Date();t = Math.floor( ( iNew - iNow ) / 1000 );if ( t >= 0 ) {str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';aInp[1].value = str;} else {clearInterval( timer );}}, 1000);};
};
</script>
</head><body>距离：<input class="t1" type="text" value="April 27,2018 22:3:0" /><br />
还剩：<input class="t1" type="text" />
<input type="button" value="开始倒计时吧" /></body>
</html>

js倒计时原理及实例总结相关推荐

html倒计时代码原理,最全面的JS倒计时代码
本文实例为大家分享了JS倒计时展示的具体代码,供大家参考,具体内容如下第一种:精确到秒的javascript倒计时代码 HTML代码: 离2010年还有: startclock() var time ...
js 倒计时 php,JS如何实现分钟倒计时（十分钟倒计时实例）
工作中经常需要在页面中设置倒计时,那你知道JS如何实现分钟倒计时吗?这篇文章和大家分享一个JS十分钟倒计时代码,非常简单实用,感兴趣的朋友可以看看. 编写JS倒计时代码需要用到很多JavaScript ...
php闭包原理,闭包原理及实例
本篇文章给大家带来的内容是关于闭包原理及实例的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 闭包函数被调用之后,会创建一个执行环境及作用域链.函数被执行完之后就会被释放掉 ...
html倒计时10s,js 倒计时10s
允许点击 var wait = 10; function time(o){ if(wait==0){ o.innerHTML = "允许点击"; o.removeAttribute ...
【文件上传漏洞-03】前端JS检测与绕过实例—以upload-labs-1为例
目录 1 前端JS检测与绕过 2 前端JS检测与绕过实例 2.1 实验目的 2.2 操作环境 2.3 前期准备 2.4 具体过程 2.4.1 文件上传前期盲测 2.4.2 方法一:删除JS直接上传 2 ...
php回调函数原理和实例
php回调函数原理和实例原理自己调用自己称之为"递归",而不是回调你也知道回调的关键是这个回既然是回,那么就有一个谁是主体的问题,因为回调是往回调用的意思我调用了函数A ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
原生js cookie的使用实例setCookie()、getCookie()方法
01 <html> 02 <head> 03 <title>原生js cookie的使用实例setCookie().getCookie()方法</title& ...
java linkedlist实例_Java Linkedlist原理及实例详解
这篇文章主要介绍了Java Linkedlist原理及实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下定义:linkedlist属于链表结构 ...

js倒计时原理及实例总结

js倒计时原理及实例总结相关推荐

最新文章

热门文章