JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）

JS实现倒计时效果

js基础语法实现倒计时效果（需要手动刷新）

核心算法：输入的时间减去现在的时间就是倒计时所剩余的时间，即倒计时，但是不能拿时分秒相减，比如05分减去25分，结果变负。
用时间戳来做用户输入时间总的毫秒数减去现在时间的总的毫秒数得到的就是剩余时间的毫秒数
把剩余时间总的毫秒数转换为天、时、分、秒（时间戳转换为时分秒）
时间戳：获得Date 总的毫秒数不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒
转换公式如下

     d = parseInt(总秒数/60/60/24)；  计算天数h = parseInt(总秒数/60/60 % 24)；  计算小时m = parseInt(总秒数/60 % 60)；  计算分数s = parseInt(总秒数 % 60)；  计算秒数

具体代码如下

function countDown(Time) {var nowTime = +new Date();//返回的是当前时间总的毫秒数var inputTime = +new Date(Time);//返回的是用户输入时间总毫秒数var times = (inputTime - nowTime) / 1000;//times是剩余的时间总秒数var d = parseInt(times / 60 / 60 / 24);//天d = d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24);//小时h = h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60)//分m = m < 10 ? '0' + m : m;var s = parseInt(times % 60);//秒s = s < 10 ? '0' + s : s;return d + '天' + h + '时' + m + '分' + s + '秒';}alert(countDown('2021-12-12 18:00:00'));//调用函数

利用回调函数(setinterval)实现全自动倒计时效果

    <div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>//获取元素var hour = document.querySelector('.hour');//小时的黑色盒子var minute = document.querySelector('.minute');//分钟的黑色盒子var second = document.querySelector('.second');//秒钟的黑色盒子var inputTime = +new Date('2021-10-17 18:00:00');// 输入一个时间  //本质是利用时间戳  全局变量 每一次调用函数都需要用到countDown();//先调用这个函数 防止第一次刷新页面有空白//2.开启定时器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date();//返回的是当前时间总的毫秒数var times = (inputTime - nowTime) / 1000;//times是剩余的时间总秒数var h = parseInt(times / 60 / 60 % 24);//小时h = h < 10 ? '0' + h : h;hour.innerHTML = h;var m = parseInt(times / 60 % 60)//分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);//秒s = s < 10 ? '0' + s : s;second.innerHTML = s;console.log(Date());}

个人感觉javascript就是个逐渐增加的过程，在原本简单的代码的效果上利用各种各样的函数方法来实现各色的功能。这个小功能让我对js的理解又进步一个层面（代码虽然没什么两样），就像是一个从0到1的过程，希望以后可以从1逐渐做加法。

JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）相关推荐

劝学:不积跬步,无以至千里,不积小流,无以成江海.
领略古人智慧. 不积跬步,无以至千里,不积小流,无以成江海.骐骥一跃,不能十步,驽马十驾,功在不舍.--<荀子·劝学>
未来两周目标计划---C++ and Disassembly(不积跬步无以至千里,不积小流无以成江海)
1.深入理解C++模板编程 2. 重新仔细查阅C++的编译器多态与运行期多态: 3. 利用反汇编去跟踪代码,深入弄懂程序执行的内部过程: 任务完成程度: 2014.11.12 完成度:%10 2014 ...
未来两周目标计划---C++ and Disassembly(不积跬步无以至千里,不积小流无以成江海)...
2019独角兽企业重金招聘Python工程师标准>>> 1.深入理解C++模板编程 2. 重新仔细查阅C++的编译器多态与运行期多态: 3. 利用反汇编去跟踪代码,深入弄懂程序执行的 ...
不积跬步无以至千里[转]
不积跬步无以至千里<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> ...
C#操作Excel表格，不积硅步无以至千里
本文主要介绍一下c#来操作excel表格,主要介绍我使用的,我是使用第三方提供的函数库(NPOI)来进行excel的操作,而NPOI库函数在其官网下,我这里就不拿出来了. 1:NPOI库函数 NPOI ...
熊军：不积跬步无以至千里技术路上没有捷径
大家好,今天是一周新的开始,继续给大家带来ORACLE ACE的人物采访.今天的采访嘉宾是熊军先生(ID:magic007),熊军先生一直从事Oracle数据库专业技术服务工作,有近10年的Oracl ...
oracle左补全函数,Oracle 左侧补齐函数lpad 函数 (不积跬步,无以至千里)
Oracle 左侧补齐函数lpad 函数 (不积跬步,无以至千里) (2017-10-08 16:24:41) 函数介绍 lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是 ...
积跬步而至千里，积小流而成江海
2011年2月16日,开通了CSDN的博客,坚持每隔一段时间写一写文章,把自己在工作中碰到的一些问题摊上来讨论讨论,同时也为以后碰到同类问题提供快速检索. 深以为技术的积累不是一天两天的事,冰冻三尺非 ...
不积硅步无以至千里
首先很感谢屏幕前的各位小伙伴观看我的这一篇文章. 自我介绍我是一位准大一新生,对于计算机有着浓厚的兴趣,但是在高考后我并没有录取到计算机的专业,而是被录取到了离计算机很近的自动化专业,这对于我来说也 ...

JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）

JS实现倒计时效果

JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）相关推荐

最新文章

热门文章